Angular 2 - การผูกข้อมูล
การผูกสองทางเป็นฟังก์ชันใน Angular JS แต่ได้ถูกลบออกจาก Angular 2.x เป็นต้นไป แต่ตอนนี้เนื่องจากเหตุการณ์ของคลาสใน Angular 2 เราสามารถผูกกับคุณสมบัติในคลาส AngularJS ได้
สมมติว่าคุณมีคลาสที่มีชื่อคลาสคุณสมบัติที่มีชนิดและค่า
export class className {
property: propertytype = value;
}จากนั้นคุณสามารถผูกคุณสมบัติของแท็ก html กับคุณสมบัติของคลาสได้
<html tag htmlproperty = 'property'>จากนั้นค่าของคุณสมบัติจะถูกกำหนดให้กับ htmlproperty ของ html
ลองดูตัวอย่างว่าเราจะบรรลุการเชื่อมโยงข้อมูลได้อย่างไร ในตัวอย่างของเราเราจะดูการแสดงภาพโดยแหล่งที่มาของภาพจะมาจากคุณสมบัติในคลาสของเรา ต่อไปนี้เป็นขั้นตอนในการบรรลุเป้าหมายนี้
Step 1- ดาวน์โหลด 2 ภาพใดก็ได้ สำหรับตัวอย่างนี้เราจะดาวน์โหลดรูปภาพง่ายๆที่แสดงด้านล่าง
Step 2 - จัดเก็บภาพเหล่านี้ไว้ในโฟลเดอร์ชื่อ Imagesในไดเรกทอรีแอป หากไม่มีโฟลเดอร์รูปภาพโปรดสร้างขึ้นมา
Step 3 - เพิ่มเนื้อหาต่อไปนี้ใน app.component.ts ดังที่แสดงด้านล่าง
import { Component } from '@angular/core';
@Component ({
selector: 'my-app',
templateUrl: 'app/app.component.html'
})
export class AppComponent {
appTitle: string = 'Welcome';
appList: any[] = [ {
"ID": "1",
"url": 'app/Images/One.jpg'
},
{
"ID": "2",
"url": 'app/Images/Two.jpg'
} ];
}Step 4 - เพิ่มเนื้อหาต่อไปนี้ใน app.component.html ดังที่แสดงด้านล่าง
<div *ngFor = 'let lst of appList'>
<ul>
<li>{{lst.ID}}</li>
<img [src] = 'lst.url'>
</ul>
</div>ในไฟล์ app.component.html ด้านบนเรากำลังเข้าถึงรูปภาพจากคุณสมบัติในคลาสของเรา
เอาต์พุต
ผลลัพธ์ของโปรแกรมข้างต้นควรเป็นดังนี้ -
