Angular 8 - ข้อมูล Static กับ Component และ การแสดงผล

การเก็บข้อมูล Static เป็น Hard Code และการเอาออกมาแสดงที่ Component
เรายังทำตาม Tutorial Your First App ส่วนนี้จะเป็นเกี่ยวกับข้อมูลที่เก็บไว้ใน App ของเราโดยเป็นแบบ Static
เว็บหน้า Your First App https://angular.io/start

ในไฟล์ Component เวลาที่เราประกาศตัวแปรในการเก็บข้อมูลเราสามารถตั้งชื่อขึ้นมาได้เลยในไฟล์ "product-list.component.ts"

โดยสร้างตัวแปร "title" เก็บคำว่า "Product List" ก็เพิ่มลงไปใน Code เป็น title='Product List'; ตามตัวอย่าง
เมื่อต้องการเรียกออกมาแสดงโดยเรียกใน Template ให้ใช้ {{ }} ในการเรียก เป็น {{title}} ก็จะดึงค่ามาแสดง

?

src/app/product-list/product-list.component.ts

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

import { Component, OnInit } from '@angular/core';   @Component({   selector: 'app-product-list',   templateUrl: './product-list.component.html',   styleUrls: ['./product-list.component.css'] })   export class ProductListComponent implements OnInit {     title = 'Product List';     constructor() { }     ngOnInit() {   }   }

?

src/app/product-list/product-list.component.html

1	<h1>{{title}}</h1>

แต่ถ้าค่ามีการเก็บไว้เป็น Array ให้เราใช้ *ngFor="let objectName of arrayName" จะเป็นการวน For และแยก Object ออกมาจาก Array
เมื่อต้องการแสดงผลก็ใช้ {{ }} โดยอ้างเป็น Object ตามปกติ

?

src/app/product-list/product-list.component.ts

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

import { Component, OnInit } from '@angular/core';   @Component({   selector: 'app-product-list',   templateUrl: './product-list.component.html',   styleUrls: ['./product-list.component.css'] })   export class ProductListComponent implements OnInit {     title = 'Product List';   productList = [{     name: 'Phone XL'   },{     name: 'Phone Mini'   },{     name: 'Phone Standard'   }]     constructor() { }     ngOnInit() {   }   }

?

src/app/product-list/product-list.component.html

1 2 3 4 5

<h1>{{title}}</h1>   <div *ngFor="let product of productList">     {{product.name}} </div>

---

ต่อไปเราต้องการให้เวลาที่เอาเมาส์วางไว้บน Product Name จะมี Title ขึ้นมาด้วยตาม Tutorial แบบนี้

ให้เราทำการเพิ่ม Description ในแต่ละ Object ก่อน
เสร็จแล้วเมื่อเราต้องการส่งค่าไปยัง Attribute ใน HTML Tag ให้เราใช้ [ ] ในการส่งค่าไป

?

src/app/product-list/product-list.component.ts

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

import { Component, OnInit } from '@angular/core';   @Component({   selector: 'app-product-list',   templateUrl: './product-list.component.html',   styleUrls: ['./product-list.component.css'] })   export class ProductListComponent implements OnInit {     title = 'Product List';   productList = [{     name: 'Phone XL',     description: 'A large phone with one of the best screen'   },{     name: 'Phone Mini',     description: 'A great phone with one of the best cameras'   },{     name: 'Phone Standard',     description: ''   }]     constructor() { }     ngOnInit() {   }   }

?

src/app/product-list/product-list.component.html

1 2 3 4 5 6 7

<h1>{{title}}</h1>   <div *ngFor="let product of productList">     <a [title]="'Description: ' + product.description">         {{product.name}}     </a> </div>

---

สรุปในพาทนี้
เราทำความเข้าใจการเก็บค่าใน Component และการนำค่าออกมาแสดงแล้วโดยการใช้ {{ }}, *ngFor และ [ ]
ตอนนี้เรารู้จักการ Interpolation {{ }}, Property binding [ ] และ *ngFor แล้ว

---

แถม !!
หากเราต้องการเอา Product List เก็บไว้นอก Component เพื่อให้ Component อื่นดึงไปใช้งานได้ด้วยให้เราทำการสร้างไฟล์แยกได้

สร้างไฟล์ใหม่ชื่อ products.ts ใน folder src/app/static และทำการ Import เข้าไปใน product-list.component.ts และกำหนดชื่อให้ productList
ส่วนการแสดงผลเราไม่ได้แก้ สามารถเรียกใช้งานได้ปกติ

?

src/app/static/products.ts

1 2 3 4 5 6 7 8 9 10 11 12

export const products = [     {         name: 'Phone XL',         description: 'A large phone with one of the best screen'     },{         name: 'Phone Mini',         description: 'A great phone with one of the best cameras'     },{         name: 'Phone Standard',         description: ''     } ]

?

src/app/product-list.component.ts

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

import { Component, OnInit } from '@angular/core';   import { products } from '../static/products';   @Component({   selector: 'app-product-list',   templateUrl: './product-list.component.html',   styleUrls: ['./product-list.component.css'] })   export class ProductListComponent implements OnInit {     title = 'Product List';   productList = products;     constructor() { }     ngOnInit() {   }   }