เพิ่มให้มีอุปกรณ์หลายประเภท

src/app/pages/equipment/equipment.component.ts

 import { Component, OnInit } from '@angular/core';
-import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';
+import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
 
-interface Country {
-  id?: number;
-  equip: string;
+interface EquirmentModel {
+  id: number;
   name: string;
-  sdate: string;
-  edate: string;
+  desc: string;
+  type: string;
+  pic: string;
 }
 
-const COUNTRIES: Country[] = [
-  {
-    equip: 'string',
-    name: 'ray',
-    sdate: 'string',
-    edate: 'string'
-  }
-
-];
-
 @Component({
   selector: 'app-equipment',
   templateUrl: './equipment.component.html',
@@ -27,17 +17,48 @@ const COUNTRIES: Country[] = [
 export class EquipmentComponent implements OnInit {
   page = 1;
   pageSize = 10;
-  collectionSize = COUNTRIES.length;
-  countries: Country[];
+
   closeResult = '';
 
+  listEquirment: EquirmentModel[] = [
+    {
+      id: 1,
+      name: "จอคอมพิวเตอร์",
+      desc: "หน้าจอขนาด 22 นิ้ว",
+      type: "it",
+      pic: "assets\img\mo1.jpg"
+    },
+    {
+      id: 2,
+      name: "เมาส์",
+      desc: "...",
+      type: "it",
+      pic: "assets\img\mou.jpg"
+    },
+    {
+      id: 3,
+      name: "โน๊ตบุ๊ค",
+      desc: "หน้าจอขนาด 20 นิ้ว",
+      type: "it",
+      pic: "assets\img\notebook.jpg"
+    },
+    {
+      id: 4,
+      name: "คีย์บอร์ด",
+      desc: "...",
+      type: "it",
+      pic: "assets\img\keyboard.png"
+    }
+  ]
+  collectionSize = this.listEquirment.length;
+
   constructor(private modalService: NgbModal) { }
 
   ngOnInit(): void {
   }
-  
+
   open(content) {
-    this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
+    this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
       this.closeResult = `Closed with: ${result}`;
     }, (reason) => {
       this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
@@ -54,8 +75,8 @@ export class EquipmentComponent implements OnInit {
     }
   }
   refreshCountries() {
-    this.countries = COUNTRIES
-      .map((country, i) => ({ id: i + 1, ...country }))
+    this.listEquirment = this.listEquirment
+      .map((item, i) => ({ id: i + 1, ...item }))
       .slice((this.page - 1) * this.pageSize, (this.page - 1) * this.pageSize + this.pageSize);
   }
 }
\ No newline at end of file