ทำให้เป็นรูปเป็นร่างมากขึ้น

Arkhom Khamthip
Aug 26, 2017 · 2 min read

จากโพสที่แล้ว ได้เริ่มสร้าง 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;
}
}

การแสดงผล

ครั้งที่แล้วเรา 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 {}

CheHipster

Inspried by JHipster

)
Arkhom Khamthip

Written by

Development Manager

CheHipster

Inspried by JHipster

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade