เทมเพลตและการผูกข้อมูล

เทมเพลตช่วยให้คุณแสดงเนื้อหาแบบไดนามิกในแองกูลาร์ได้ บทเรียนนี้จะอธิบายการทำงานของเทมเพลตและการผูกข้อมูล

เทมเพลตคืออะไร

เทมเพลตคือ HTML ที่แองกูลาร์ใช้แสดงผลมุมมองของคอมโพเนนต์ โดยผสาน HTML เข้ากับไวยากรณ์เฉพาะของแองกูลาร์เพื่อแสดงข้อมูล

การแทรกค่า

การแทรกค่าช่วยให้คุณใส่ค่าจากคอมโพเนนต์ลงใน HTML ได้ ใช้วงเล็บปีกกาคู่เพื่อแสดงข้อมูล:

{{ data }}

{{ username }}

การผูกคุณสมบัติ

การผูกคุณสมบัติช่วยให้คุณกำหนดคุณสมบัติขององค์ประกอบ HTML แบบไดนามิกได้:

[src] = "imageUrl"

<img [src]="user.profilePicture">

การผูกเหตุการณ์

การผูกเหตุการณ์ช่วยให้แอปพลิเคชันตอบสนองต่อการกระทำของผู้ใช้ได้:

(click)="onClick()"

<button (click)="showAlert()">Click me</button>

การผูกแบบสองทาง

การผูกแบบสองทางช่วยให้ส่วนติดต่อผู้ใช้และข้อมูลของคุณซิงโครไนซ์กัน ใช้ [(ngModel)]:

<input [(ngModel)]="user.name">

ไดเรกทีฟเชิงโครงสร้าง

ไดเรกทีฟเชิงโครงสร้างจะปรับเปลี่ยนเค้าโครง DOM ตัวอย่างได้แก่ *ngIf และ *ngFor

<div *ngIf="isVisible">Visible Content</div>

การใช้ ngFor

*ngFor จะวนซ้ำข้อมูลและแสดงองค์ประกอบซ้ำตามข้อมูล:

<li *ngFor="let item of items">{{ item }}</li>

สรุป

คุณได้เรียนรู้วิธีใช้เทมเพลตและการผูกข้อมูลเพื่อสร้างมุมมองแองกูลาร์แบบไดนามิกแล้ว