Angular 2 - Data Binding
Liên kết hai chiều là một chức năng trong Angular JS, nhưng đã bị loại bỏ khỏi Angular 2.x trở đi. Nhưng bây giờ, kể từ sự kiện của các lớp trong Angular 2, chúng ta có thể liên kết với các thuộc tính trong lớp AngularJS.
Giả sử nếu bạn có một lớp với tên lớp, một thuộc tính có kiểu và giá trị.
export class className {
property: propertytype = value;
}Sau đó, bạn có thể liên kết thuộc tính của thẻ html với thuộc tính của lớp.
<html tag htmlproperty = 'property'>Giá trị của thuộc tính sau đó sẽ được gán cho htmlproperty của html.
Hãy xem một ví dụ về cách chúng ta có thể đạt được liên kết dữ liệu. Trong ví dụ của chúng tôi, chúng tôi sẽ xem xét việc hiển thị hình ảnh trong đó nguồn hình ảnh sẽ đến từ các thuộc tính trong lớp của chúng tôi. Sau đây là các bước để đạt được điều này.
Step 1- Tải xuống 2 hình ảnh bất kỳ. Đối với ví dụ này, chúng tôi sẽ tải xuống một số hình ảnh đơn giản được hiển thị bên dưới.
Step 2 - Lưu trữ những hình ảnh này trong một thư mục có tên Imagestrong thư mục ứng dụng. Nếu thư mục hình ảnh không có, hãy tạo nó.
Step 3 - Thêm nội dung sau vào app.component.ts như hình bên dưới.
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 - Thêm nội dung sau vào app.component.html như hình bên dưới.
<div *ngFor = 'let lst of appList'>
<ul>
<li>{{lst.ID}}</li>
<img [src] = 'lst.url'>
</ul>
</div>Trong tệp app.component.html ở trên, chúng tôi đang truy cập hình ảnh từ các thuộc tính trong lớp của chúng tôi.
Đầu ra
Đầu ra của chương trình trên sẽ như thế này:
