เนื้อหาตอนนี้ เรามารู้จักวิธีการนำข้อมูลมาแสดงใน template โดยข้อมูล
ที่จะใช้เป็นค่าของ component proerty หรือก็คือค่าตัวแปรที่เรากำหนดใน
component class นั่นเอง ดูรูปด้านล่างประกอบ
จากรูป ตัวแปร name คือ component property ที่ถูกนำค่าไปแสดงใน template ด้วย
การกำหนด {{ชื่อ component property}} ซึ่งจะได้เป็น {{name}}
โดยการใช้ ดับเบิ้ลปีกกา นั้นเรียกว่า interpolation ทั้งนี้ผู้เขียนขอใช้เป็น การแสดงข้อมูล
โดยการแทรก component property
ขอยกโค้ดตัวอย่างไฟล์ app.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 29 30 31 32 33 34 35 36 37 | import { Component } from '@angular/core';@Component({ selector: 'my-app', template: ` <h3>{{title}}</h3> <hr/> <strong>Name:</strong> {{name}} <br/> <strong>Age:</strong> {{age}} <br/> <strong>Address:</strong> {{address.addr1}} {{address.district}} {{address.amphur}} {{address.province}} {{address.zipcode}} <br/> <strong>Sports</strong> <br/> <ul> <li *ngFor='let sport of sports'> {{sport}} </li> </ul> <strong>Status:</strong> <span *ngIf='status'>Active</span> <span *ngIf='!status'>Not Active</span> <br/> `,})export class AppComponent { title = 'User Profile'; name = 'Angurlar 2'; age = 24; address = { addr1:'224', district:'คลองจั่น', amphur:'บางกะปิ', province:'กรุงเทพฯ', zipcode:'10240' } sports = ['Football','Tennis','Bowling']; status = false;} |
จากตัวอย่างข้างต้น ให้ดูเฉพาะส่วนของการใช้งาน component property นำไปแสดงผลโดยการใช้
{{}} น่าจะเข้าใจได้ไม่ยาก สังเกตว่า เรามีการกำหนด component property ในลักษณะตัวแปรหลายๆ
รูปแบบ เช่น เป็น string (title, name) number (age) object (address) array (sports) และ
boolean (status)
การแสดงข้อมูลที่เป็น array ใน template ด้วย *ngFor directive
ต่อไปเรามาดูในส่วนของการแสดง array สังเกตจากรูป ดูในส่วนของโค้ดเกี่ยวกับ
การวนลูปทำซ้ำ ของแท็ก <li> ใน template โดยใช้ *ngFor directive จัดการ
1 2 3 4 5 | <ul> <li *ngFor='let sport of sports'> {{sport}} </li></ul> |
*ngFor คือ Angular "repeater" directive ทำหน้าที่ในการทำการวนลูปทำซ้ำ ซึ่งในตัวอย่าง
ก็คือทำการวนลูปแสดงค่าข้อมูลใน array ใน <li>
การใช้คำว่า let แล้วต่อด้วยตัวแปร sport เป็นการสร้างตัวแปรที่เรียกว่า template input variable
โดยไปวนลูปดึงค่าในตัว array ที่ชื่อ sports ที่เป็น component property จากนั้น
นำค่า sport ของแต่ละ array มาแสดงใน <li> โดยใช้ {{sport}}
ถ้าเราอยากรูป index ของ array สามารถกำหนดเพิ่มเติมได้ดังนี้
1 2 3 4 5 | <ul> <li *ngFor='let sport of sports; let i=index'> {{i+1}}. {{sport}} </li></ul> |
โดยค่า i จะเริ่มต้นที่ 0 แต่เวลาแสดง เราสามารถ บวกค่าเพิ่มเพื่อแสดงลำดับให้ถูกต้องได้
การกำหนดเงื่อนไขแสดงหรือไม่แสดงข้อมูลด้วย *ngIf
ในการกรณีที่เราต้องการแสดง หรือไม่แสดงรายการข้อมูลบางส่วน เราสามารถใช้งาน
*ngIf directive โดยจะอยู่ภายใต้เงื่อนไข true/false สังเกตตัวอย่างตามโค้ด้านล่าง ดังรูป
1 2 3 | <strong>Status:</strong> <span *ngIf='status'>Active</span><span *ngIf='!status'>Not Active</span> <br/> |
สังเกตว่าหัวข้อ Status เรากำหนดให้มีการใช้งาน <span> 2 ตัว คือที่เป็นข้อความว่า
Active กับ Not Active โดยใช้ *ngIf ในการกำหนดเงื่อนไขว่าจะแสดงหรือไม่แสดง ในที่นี้
ใช้ component property ที่เป็น boolean มีค่าเป็น true หรือ false
การใช้เครื่อง ! ด้านหน้า จะหมายถึงมีค่าตรงกันข้ามกับที่ของตัวเป็นเอง ดังนั้นถ้า
status เท่ากับ true แล้ว !status จะเท่ากับ false แบบนี้เป็นต้น
จะได้ว่า
*ngIf='status' ถ้า status เท่ากับ true คำว่า active จะแสดง และในขณะเดียวกับ
*ngIf='!status' ก็จะทำให้ Not Active ไม่แสดง เพราะ !status = fasle นั้นเอง
การกำหนดค่าของ Component property ใน Constructor
จากตัวอย่างโค้ดข้างต้น เราได้ทำการกำหนดค่าของตัวแปร เริ่มต้นให้กับ component แล้ว
เรายังสามารถใช้วิธีการประกาศและกำหนดค่าโดยใช้ constructor ได้ ซึ่ง constructor ก็คือ
ฟังก์ชั่นที่ทำงานทันทีเมื่อมีการเรียกใช้ component
เรามาดูตัวอย่างโค้ด แล้วเปรียบเทียบความแตกต่างจากโค้ด้านบนดู
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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | import { Component } from '@angular/core';@Component({ selector: 'my-app', template: ` <h3>{{title}}</h3> <hr/> <strong>Name:</strong> {{name}} <br/> <strong>Age:</strong> {{age}} <br/> <strong>Address:</strong> {{address.addr1}} {{address.district}} {{address.amphur}} {{address.province}} {{address.zipcode}} <br/> <strong>Sports</strong> <br/> <ul> <li *ngFor='let sport of sports; let i=index'> {{i+1}}. {{sport}} </li> </ul> <strong>Status:</strong> <span *ngIf='status'>Active</span> <span *ngIf='!status'>Not Active</span> <br/> `,})export class AppComponent { title:string; name:string; age:number; address:address; sports:string[]; status:boolean; constructor(){ this.title = 'User Profile'; this.name = 'Angurlar 2'; this.age = 24; this.address = { addr1:'224', district:'คลองจั่น', amphur:'บางกะปิ', province:'กรุงเทพฯ', zipcode:'10240' } this.sports = ['Football','Tennis','Bowling']; this.status = false; }}interface address{ addr1:string; district:string; amphur:string; province:string; zipcode:string;} |
ที่เพิ่มเติมเข้ามาคือมีการกำหนด ชนิดของตัวแปร ทำให้ตัวแปรนั้นๆ มีความเฉพาะเจาะจงมากขึ้น
สามารถนำค่าของตัวแปรไปใช้อย่างถูกต้องตามชนิดของตัวแปรนั้นๆ ใน construtor() มีการใช้ this
ซึ่งหมายถึง componennt class ที่กำลังใช้งานอยู่ โดยใน constructor จะทำการกำหนดค่าให้กับ
ตัวแปร property
สิ่งที่เพิ่มเข้ามาให้เราสังเกตที่ตัวแปรที่ชื่อ address เนื่องจากเดิมตัวแปร address เป็น object และมี
ฟิลด์ย่อยด้านใน ดังนั้นเพื่อให้รูปแบบของฟิลด์ย่อยมีการกำหนดชนิดข้อมูลที่ถูกต้อง จึงมีการใช้งาน
interface ซึ่งเป็นรูปแบบของ TypeScript ในการเข้ามาใช้ระบุชนิดของข้อมูลในฟิลด์ด้านใน object อีกที
โดยคำสั่ง interface จะกำหนดไว้ด้านนอก component class
ตัวอย่างผลลัพธ์ ของไฟล์ตัวอย่าง
รายละเอียดเกี่ยวกับการใช้งาน template และการแสดงข้อมูลยังมีรายละเอียดอีกมาก
ยังไงรอติดตามเนื้อหาตอนต่อไป
อ่านต่อที่บทความ
เนื้อหาที่เกี่ยวข้อง