ngFor là một trong số những Structural Directive mà bạn chắc chắc sẽ gặp phải khi làm việc với Angular. Bài viết này sẽ cùng bạn khám phá một số đặc điểm của loại Directive này nhé!

ngFor là cái gì?

ngFor là một loại Directive, cụ thể là Structural Directive trong Angular. Có nhiệm vụ duyệt qua một danh sách và tạo ra DOM Element tương ứng cho từng phần tử.

Cú pháp

<html-element *ngFor="let <item> of <items>”> <html-content></html-content>
</html-element>

Trong đó:

• html-elemnt: một phần tử HTML bất kỳ (ví dụ: <div>, <li>, ... <custom-element>) mà bạn muốn sử dụng để hiển thị dữ liệu. Nó đóng vai trò như một "container" cho các nội dung được lặp lại
• *ngFor="let <item> of <items>”: Đây là cú pháp của *ngFor directive trong Angular. <items> là tập hợp dữ liệu (thường là một mảng) mà bạn muốn lặp qua (ví dụ: fruits = ['Táo', 'Chuối', 'Cam']). <item> là biến cục bộ đại diện cho giá trị của mỗi phần tử tại mỗi vòng lặp.
• html-content: đại diện cho nội dung hiển thị tại mỗi lần lặp

Ví dụ

Component Products hiển thị danh sách các sản phẩm. Mỗi sản phẩm được duyệt qua, Angular tạo một thẻ <li> với nội dung bên trong

products.components.ts

products.component.html

Kết quả:

Trong đó:

• html-element tương ứng với thẻ <li>
• item tương ứng với prod
• items tương ứng với products
• html-content tương ứng với nội dung bên trong thẻ <li> (dòng 8 -> 26)

Local Variables

*ngFor cung cấp một số giá trị bổ sung thêm để mô tả vị trí hoặc đặc điểm của các phần tử. Các giá trị này gồm:

• index: number: trả về chỉ mục của phần tử
• first: boolean: true nếu là phần tử đầu tiên
• last: boolean: true nếu là phần tử cuối cùng
• even: boolean: true nếu phần tử ở vị trí chẵn
• odd: boolean: true nếu phần tử ở vị trí lẻ

Ví dụ: tạo khoảng cách giữa các phần tử (dòng 5)

products.component.html

TrackBy

Khi sử dụng *ngFor, Angular sẽ tự động theo dõi sự thay đổi của mảng để cập nhật lại giao diện. Tuy nhiên, sau khi phát hiện sự thay đổi, Angular xóa tất cả DOM trước đó và tạo lại từ đầu. Việc này ảnh hưởng đến hiệu suất khi dữ liệu lớn và giao diện phức tạo

product.component.ts

Khi sử dụng trackBy; bạn cần cung cấp một hàm trả về giá trị duy nhất cho từng phần tử để giúp Angular biết cách theo dõi từng phần tử

products.component.html

products.component.ts

Kết quả:

trackById là một hàm giúp Angular biết cách theo dõi các phần tử dựa vào Id của chúng để biết được phần tử DOM nào thay đổi, từ đó cập nhật lại giao diện.

product.component.ts

Lợi ích của trackBy:

• Tối ưu hiệu suất: Khi mảng thay đổi, Angular chỉ cần cập nhật những phần tử có sự thay đổi (dựa trên giá trị trả về từ trackBy), thay vì phải so sánh lại toàn bộ mảng.
• Giảm độ phức tạp khi render lại giao diện: Điều này giúp ứng dụng trở nên nhanh hơn và mượt mà hơn, đặc biệt khi danh sách có nhiều phần tử hoặc thay đổi thường xuyên.