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}} ก็จะดึงค่ามาแสดง

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() {
  }

}

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

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

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() {
  }

}

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

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

---

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

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

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() {
  }

}

<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
ส่วนการแสดงผลเราไม่ได้แก้ สามารถเรียกใช้งานได้ปกติ

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: ''
    }
]

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() {
  }

}