 |
| Angular |
Syntax di angular sangat beragam, di bawah ini adalah daftar syntax yang mungkin berguna:
<ul>
<li *ngFor="let item of items; let i = index">
{{i}} {{item}}
</li>
</ul>
Sintaks baru memiliki beberapa hal yang perlu diperhatikan. Yang pertama adalah * ngFor. * Adalah singkatan untuk sintaks template sudut baru dengan tag template. Ini juga disebut Directive struktural. Hal ini membantu untuk mengetahui bahwa * hanya singkatan untuk secara eksplisit mendefinisikan binding data pada tag template. Tag template mencegah browser membaca atau mengeksekusi kode di dalamnya.
<!-- Angular longhand ngFor -->
<template ngFor let-item="$implicit" [ngForOf]="items" let-i="index">
{{i}} {{item}}
</template>
Jadi di bawah ini adalah sintaks khas untuk daftar sudut.
<ul>
<li *ngFor="let item of items; let i = index">
{{i}} {{item}}
</li>
</ul>
Melihat kembali ngFor hal yang menarik berikutnya untuk dicatat adalah let item of items;. Kunci membiarkan merupakan bagian dari sintaks 2 Template sudut. biarkan menciptakan variabel lokal yang dapat dirujuk di mana saja di template kita. Jadi dalam kasus kami, kami menciptakan item let variabel lokal.
let i membuat template variabel lokal untuk mendapatkan indeks dari array. Jika Anda tidak perlu akses ke indeks dalam daftar Anda dengan ngFor hanya bermuara pada kode berikut.
<ul>
<li *ngFor="let item of items">
{{item}}
</li>
</ul>
Satu hal yang perlu diperhatikan sintaks CamelCase diperkenalkan pada Alpha 52. Sebuah parser HTML baru diperkenalkan yang memungkinkan camelCasing di template untuk menggantikan sintaks kebab-kasus.
Lacak Dengan
Sudut 2 juga termasuk fitur trackBy dari 1.x sudut yang memungkinkan peningkatan kinerja dalam daftar render kami dengan melacak pengenal unik pada daftar barang-barang kami. The trackBy dalam versi yang lebih baru dari sudut yang sedikit berbeda dari sudut 1. Untuk menggunakan lagu oleh Anda harus lulus fungsi sebagai parameter dari komponen Anda.
<ul>
<li *ngFor=" let item of items; trackBy: trackByFn;">
{{item}}
</li>
</ul>
// Method in component class
trackByFn(index, item) {
return item.id;
}
Sintaks sudut yang baru akan memungkinkan sudut untuk bekerja dengan komponen web asli dan memperoleh manfaat menggunakan Komponen Web. Sudut akan membawa banyak perbaikan yang menarik lebih sudut 1 dan akan segera memungkinkan kita untuk membuat aplikasi web lebih terukur.
Sekian, terimakasih atas kunjungannya.
Salam,
PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.