Cấu trúc NgFor trong Angular

20-12-2023
Toanngo92
0 Comments

NgForOf (hay NgFor) trong Angular giúp hiển thị danh sách các phần tử từ một mảng ra ngoài template một cách dễ dàng. Cấu trúc của NgForOf giống với cú pháp của vòng lặp for...of trong TypeScript.

Giả sử chúng ta có một danh sách các tác giả của các cuốn sách trong một ứng dụng bán sách/thư viện có cấu trúc như sau:

authors = [
  {
    id: 1,
    firstName: "Flora",
    lastName: "Twell",
    email: "ftwell0@phoca.cz",
    gender: "Female",
    ipAddress: "99.180.237.33",
  },
  {
    id: 2,
    firstName: "Priscella",
    lastName: "Signe",
    email: "psigne1@berkeley.edu",
    gender: "Female",
    ipAddress: "183.243.228.65",
  },
  // more data
];

Trong ví dụ trên, khi muốn hiển thị danh sách tác giả từ mảng authors, chúng ta có thể sử dụng NgForOf để lặp qua mỗi phần tử trong mảng và hiển thị thông tin tương ứng.

<div *ngFor="let author of authors">
  {{ author.id }} - {{ author.firstName }} {{ author.lastName }}
</div>

Cú pháp *ngFor gắn với một block template sẽ tạo ra một vòng lặp trên mảng authors. Biến author được sử dụng để lưu trữ từng phần tử trong mảng và hiển thị thông tin tương ứng với mỗi tác giả.

Việc sử dụng NgForOf cho phép chúng ta dễ dàng lặp qua mảng trong template mà không cần phải sử dụng vòng lặp for trong TypeScript, giúp code trở nên ngắn gọn và dễ đọc hơn.

Mục lục

Một số biến local trong một NgForOf

Khi sử dụng vòng lặp NgFor trong Angular, chúng ta có thể truy cập một số biến local để thao tác với từng phần tử trong danh sách. Các biến local này bao gồm:

Biến cục bộ	Mô tả
$implicit	Biến này chứa giá trị của phần tử trong danh sách tại lần lặp hiện tại.
index	Chứa chỉ mục của lần lặp hiện tại trong danh sách.
count	Biến này chứa tổng số phần tử trong danh sách.
first	Được gán thành `true` nếu phần tử đang được duyệt là phần tử đầu tiên trong danh sách.
last	Được gán thành `true` nếu phần tử đang được duyệt là phần tử cuối cùng trong danh sách.
even	Được gán thành `true` nếu chỉ mục của phần tử là số chẵn.
odd	Được gán thành `true` nếu chỉ mục của phần tử là số lẻ.

Để truy cập các biến này, chúng ta sử dụng cú pháp let trong NgFor, đi kèm với các biến local mà chúng ta muốn truy cập:

<div *ngFor="let author of authors; let idx = index; let total = count">
  ({{ idx }}) / ({{ total }}): {{ author.id }} - {{ author.firstName }} {{ author.lastName }}
</div>

Ở đây, idx sẽ chứa giá trị của biến index, và total sẽ chứa giá trị của biến count. Tương tự, chúng ta có thể sử dụng các biến local khác để thực hiện các logic tùy thuộc vào vị trí, chỉ mục hoặc số lượng phần tử trong danh sách khi lặp qua chúng.

Cấu trúc NgForOf và Ng-template

Khi sử dụng cú pháp dấu sao (*) trong Angular để vòng lặp NgForOf, chúng ta có thể chuyển đổi cấu trúc này sang sử dụng ng-template và property binding như sau:

<ng-template
  ngFor
  [ngForOf]="authors"
  let-author
  let-idx="index"
  let-total="count"
>
  <div>
    ({{ idx }}) / ({{ total }}): {{ author.id }} - {{ author.firstName }} {{ author.lastName }}
  </div>
</ng-template>

Ở đây, chúng ta sử dụng ng-template với thuộc tính ngFor, và thông qua các thuộc tính binding ([ngForOf], let-author, let-idx, let-total), chúng ta gán giá trị của danh sách authors, các biến local author, idx, và total. Bên trong ng-template, chúng ta sử dụng các biến local này để hiển thị thông tin tương ứng của từng phần tử trong danh sách.

Điều này cho phép chúng ta sử dụng ng-template với các thuộc tính binding để thực hiện việc lặp qua danh sách và hiển thị dữ liệu một cách linh hoạt.

Sử dụng nhiều Structure Directive trên cùng một phần tử

Khi bạn cần sử dụng nhiều Structure Directive trên cùng một phần tử trong Angular, điều này không được phép. Nhưng bạn có thể tách chúng ra và sử dụng một tầng wrapper hoặc sử dụng ng-container để tránh sinh ra các phần tử thừa. Ví dụ bên dưới sẽ giúp bạn dễ hiểu hơn:

Sử dụng ng-container:

<div *ngFor="let item of list">
  <ng-container *ngIf="somethingGood"> More code </ng-container>
</div>

ng-container không sinh ra một phần tử HTML mới trong DOM, do đó không có phần tử thừa.

Hoặc sử dụng ng-template:

<div *ngFor="let item of list">
  <ng-template [ngIf]="somethingGood"> More code </ng-template>
</div>

Việc sử dụng ng-template cũng giúp tránh tạo ra các phần tử thừa trong DOM.

Như vậy, sử dụng ng-container hoặc ng-template giúp bạn không phải tạo ra phần tử thừa khi muốn sử dụng nhiều structure directive trên cùng một phần tử.