Sudut 2 - Pengikatan Data
Pengikatan dua arah adalah fungsi di Angular JS, tetapi telah dihapus dari Angular 2.x dan seterusnya. Tapi sekarang, sejak acara kelas di Angular 2, kita bisa mengikat properti di kelas AngularJS.
Misalkan jika Anda memiliki kelas dengan nama kelas, properti yang memiliki tipe dan nilai.
export class className {
property: propertytype = value;
}Anda kemudian dapat mengikat properti tag html ke properti kelas.
<html tag htmlproperty = 'property'>Nilai properti kemudian akan ditetapkan ke properti html dari html.
Mari kita lihat contoh bagaimana kita bisa mencapai data binding. Dalam contoh kami, kami akan melihat menampilkan gambar di mana sumber gambar akan berasal dari properti di kelas kami. Berikut adalah langkah-langkah untuk mencapainya.
Step 1- Unduh 2 gambar apa saja. Untuk contoh ini, kami akan mengunduh beberapa gambar sederhana yang ditunjukkan di bawah ini.
Step 2 - Simpan gambar-gambar ini di folder bernama Imagesdi direktori aplikasi. Jika folder gambar tidak ada, buatlah.
Step 3 - Tambahkan konten berikut di app.component.ts seperti yang ditunjukkan di bawah ini.
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 - Tambahkan konten berikut di app.component.html seperti yang ditunjukkan di bawah ini.
<div *ngFor = 'let lst of appList'>
<ul>
<li>{{lst.ID}}</li>
<img [src] = 'lst.url'>
</ul>
</div>Di file app.component.html di atas, kami mengakses gambar dari properti di kelas kami.
Keluaran
Output dari program di atas harus seperti ini -
