
ทำให้เป็นรูปเป็นร่างมากขึ้น
จากโพสที่แล้ว ได้เริ่มสร้าง Angular application แบบง่ายๆ ที่มีเพียง component เดียวคือ ItemComponent ด้วย tag <my-app> . เรายังได้แสดงรายชื่อสินค้า เพียงอย่างเดียว ซึ่งหากเราต้องการแสดงสินค้าหลายๆ อย่างเราจะต้องเพิ่ม property เข้าไปในคลาสของเรา ดังนี้
class ItemComponent {
id: number;
description: string;
price: number;
}เราได้เพิ่ม property เข้าไป 3 ตัวคือ id, description และ price
Classes
เราสามารถสร้าง object จากคลาสได้ด้วยคำสั่ง new
let itemComponent = new ItemComponent();constructor เป็นส่วนสำหรับการกำหนดค่าเริ่มต้นให้กับ property ต่างๆ ของคลาส
class ItemComponent {
id: number;
description: string;
price: number; constructor() {
this.id = 1;
this.description = "ไม้จิ้มฟัน";
this.price = 20;
}
}
สิ่งที่ควรเข้าใจ: การกำหนดค่าเริ่มต้นให้กับ component ควรใช้ Component Lifecycle Hooks ซึ่งตอนนี้ผมยังไม่ใช้คับ
การแสดงผล
ครั้งที่แล้วเรา hard-coded ชื่อสินค้าและราคา ใน property template ตอนนี้เราสามารถใช้ {{ }} เพื่อแสดงชื่อสินค้าและราคาจากคลาสได้ดังนี้
//app.ts
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'@Component({
selector: 'my-app',
template: `
<h1>สินค้า: {{description}}</h1>
<h2>ราคา: {{price}} บาท</h2>
`,
})
export class ItemComponent {
id: number;
description: string;
price: number;
constructor() {
this.id = 1;
this.description = "ไม้จิ้มฟัน";
this.price = 20;
}
}@NgModule({
imports: [ BrowserModule ],
declarations: [ ItemComponent ],
bootstrap: [ ItemComponent ]
})
export class AppModule {}
Arrays
เราจะเพิ่มจำนวนของสินค้าด้วยการใชั array ดังนี้
export class ItemComponent {
items: Array<Object>;
constructor() {
this.items = [
{
id: 1,
description: 'ไม้จิ้มฟัน',
price: 20
},
{
id: 2,
description: 'เรือรบ',
price: 150
},
{
id: 3,
description: 'สากกระเบือ',
price: 300
},
{
id: 4,
description: 'Kinder egg',
price: 28
},
];
}
}เราให้ items เป็น property ของคลาสโดยเป็น array ที่สามารถเก็บ object ลงไป ซึ่ง constructor จะเพิ่มจำนวนสินค้าลงไปอีก 4 จำนวน
Twitter bootstrap ui
เพื่อความสวยงามของเวป เราจะใช้ Twitter bootstrap มาช่วย โดยเพิ่มส่วนหัวโค๊ดนี้ไปยัง index.html และ ใส่คลาส card card-block ใน template ของเราดังนี้
// index.html
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css">
</head>// app.ts
@Component({
selector: 'my-app',
template: `
<div class="card card-block" *ngFor="let item of items">
<h4 class="card-title">สินค้า: {{item.description}}<h4>
<p class="card-text">ราคา: {{item.price}} บาท</p>
<div>
`,
})
Loop
เราใช้ *ngFor ซึ่ง Angular ให้มาสำหรับ loop ของ array ซึ่งเราใช้ตัวแปร item เป็นตัวทำงานในแต่ละรอบ ซึ่งเราสามารถอ้างถึง property description และ price ของ object ในเก็บอยู่ใน array items ได้
Source code
https://plnkr.co/edit/O8HRME4tcwWsXo8hjmVQ?p=preview
//app.ts
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'@Component({
selector: 'my-app',
template: `
<div class="card card-block" *ngFor="let item of items">
<h4 class="card-title">สินค้า: {{item.description}}<h4>
<p class="card-text">ราคา: {{item.price}} บาท</p>
<div>
`,
})
export class ItemComponent {
items: Array<Object>;
constructor() {
this.items = [
{
id: 1,
description: 'ไม้จิ้มฟัน',
price: 20
},
{
id: 2,
description: 'เรือรบ',
price: 150
},
{
id: 3,
description: 'สากกระเบือ',
price: 300
},
{
id: 4,
description: 'Kinder egg',
price: 28
},
];
}
}
@NgModule({
imports: [ BrowserModule ],
declarations: [ ItemComponent ],
bootstrap: [ ItemComponent ]
})
export class AppModule {}

