Tiep Phan · · 2 min read

JavaScript · Lập Trình · Lập Trình Angular · Programming · Web Development

Thử Nghiệm Với Angular 2 Phần 5: NgFor Và Các Thuộc Tính Index, First, Last, Even, Odd, TrackBy

Giới thiệu

Trong bài học số 2, chúng ta đã tìm hiểu về một số Structual Directives trong đó có NgFor. Trong bài học này chúng ta sẽ tìm hiểu một số thuộc tính mà Angular 2 NgFor cung cấp như các biến cục bộ: index, first, last, even, odd hay việc tối ưu performance với trackBy function.

NgFor cung cấp các biến cục bộ, có thể tạo một alias cho các biến đó như:

  • index xác định chỉ số hiện tại của vòng lặp tương ứng.
  • first xác định vòng lặp hiện tại có phải là vòng lặp đầu tiên không -> true : false.
  • last xác định vòng lặp hiện tại có phải là vòng lặp cuối cùng không -> true : false.
  • even xác định vòng lặp hiện tại có phải là vòng lặp có chỉ số chẵn không -> true : false.
  • odd xác định vòng lặp hiện tại có phải là vòng lặp có chỉ số lẻ không -> true : false.

NgFor trackBy function:

Angular 2 NgFor khi thực hiện lặp qua một collection sẽ có thể tạo một template cho mỗi item (thao tác với các immutable object). Khi thực hiện thêm hoặc xóa item trong collection, nó sẽ tạo lại template vì nó không track được các item đó. Lúc này để cái thiện performance chúng ta có thể định nghĩa một phương thức để giúp Angular track được các items đó, đó là lý do ra đời của trackBy function.

Cú pháp:

<li *ngFor="let item of items; let i = index; trackBy: trackByFn">
  <!-- do something -->
</li>
<li template="ngFor let item of items; let i = index; trackBy: trackByFn">
  <!-- do something -->
</li>

Sử dụng với cú pháp thẻ template (sẽ có bài giới thiệu sau):

<template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn">
  <li>...</li>
</template>

Update từ Angular 4+

Cho phép sử dụng as:

<li *ngFor="let item of items; index as i; trackBy: trackByFn">...</li>
<li template="ngFor let item of items; index as i; trackBy: trackByFn">...</li>

Thay template bằng ng-template:

<ng-template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn">
  <li>...</li>
</ng-template>

Video bài học

Tham khảo

Tìm hiểu thêm tại Angular NgFor Directive:

https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html https://angular.io/docs/ts/latest/api/common/index/NgForOf-directive.html
Share:
Back to Blog