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 ด้านบนเรากำลังเข้าถึงรูปภาพจากคุณสมบัติในคลาสของเรา

เอาต์พุต

ผลลัพธ์ของโปรแกรมข้างต้นควรเป็นดังนี้ -