Cách sử dụng ngFor Angular Chỉ thị

Khám phá tất cả những gì bạn cần biết về chỉ thị mạnh mẽ này và cách nó giúp làm việc với các chuỗi dễ dàng hơn nhiều.

Angular sử dụng các lệnh để hiển thị động các phần tử HTML nhất định trên trang web của bạn. Một trong những lệnh cấu trúc bạn có thể sử dụng là ngFor.

Lệnh ngFor cho phép bạn lặp lại cùng một khối một số lần được chỉ định hoặc lặp qua một mảng đối tượng để hiển thị chi tiết của chúng. Đó là một công cụ mạnh mẽ mà bạn thậm chí có thể sử dụng để kết xuất các đối tượng trong các đối tượng khác.

Nó cũng có nhiều chức năng có thể hữu ích trong các tình huống cụ thể. Điều này bao gồm việc tìm kiếm các yếu tố đầu tiên và cuối cùng hoặc bỏ qua một số mục nhất định.

Cách sử dụng ngFor để lặp qua các số tĩnh

Chỉ thị ngFor dựa trên vòng lặp for, một trong nhiều vòng lặp hữu ích mà JavaScript hỗ trợ. Kể từ phiên bản hiện tại của Angular (14), bạn sẽ cần tạo một mảng có số lượng mục bạn muốn lặp qua.

1. Bạn có thể tạo một danh sách trong chính câu lệnh ngFor. Đoạn mã sau sẽ lặp lại một đoạn năm lần, sử dụng các chỉ mục từ 0 đến 4:

   <div *ngFor='let item of [0, 1, 2, 3, 4]; let i = index'>
   <p> This is a repeated paragraph: {{item}} </p>
   </div>  

2. Vì phương pháp trên có thể không phù hợp với các mảng lớn, bạn cũng có thể tạo động một mảng trong tệp TypeScript:

   export class ExampleClass implements OnInit {
   numbers: Array<number> = [];
   constructor() {
   this.numbers = Array(10).fill(1).map((x,i)=>i);
   }
   }

3. Sau đó, bạn có thể lặp qua mảng số trong HTML:

   <div *ngFor='let item of numbers; let i = index'>
   <p>This is a repeated paragraph: {{item}}</p>
   </div>

Làm thế nào để bỏ qua hoặc tạo kiểu cho một số con số nhất định

Bạn có thể dùng số lẻ hoặc thậm chí ngĐối với các biến để xác định mọi số thứ hai. Một tình huống mà bạn có thể thấy hữu ích là nếu bạn muốn tạo kiểu cho mọi hàng lẻ hoặc hàng chẵn trong bảng bằng một màu khác.

1. Trong tệp CSS cho một thành phần, hãy thêm một số lớp CSS mới. Đây là những kiểu bạn sẽ sử dụng cho các phần tử nhất định ở các chỉ mục chẵn hoặc lẻ:

   .red {
   color: red;
   }
   .blue { 
   color: blue; 
   }
   

2. Khai báo các biến chẵn và lẻ trong câu lệnh ngFor. Đây là những biến mà Angular sẽ nhận ra. Gán lớp CSS màu đỏ cho các số chẵn và lớp CSS màu xanh lam cho các số lẻ:

   <div *ngFor='let item of numbers; let odd = odd; let even = even' [ngClass]="{red: even, blue: odd}">
   <p> This is a repeated paragraph: {{item}} </p>
   </div>

3. Chạy trang web Angular của bạn bằng ng phục vụ và mở nó trong trình duyệt web. Các phần tử HTML chẵn và lẻ sẽ xen kẽ giữa các kiểu khác nhau dựa trên lớp CSS của chúng:

4. Nếu bạn muốn bỏ qua hoàn toàn mọi số chẵn, bạn có thể sử dụng lệnh ngIf. Thao tác này sẽ bỏ qua tất cả các số lẻ và chỉ hiển thị các số chẵn:

   <div *ngFor='let item of numbers; let even = even'>
   <p *ngIf='even'> This is a repeated paragraph: {{item}} </p>
   </div>

Cách đếm lùi

Để đếm lùi, bạn có thể sử dụng các phương pháp truyền thống như đảo ngược danh sách hoặc đếm lùi qua vòng lặp bằng cách sử dụng chỉ mục.

1. Khai báo một biến chỉ mục trong câu lệnh ngFor. Trong ngFor, hãy bắt đầu từ độ dài của mảng và trừ số mục bạn đã lặp qua:

   <div *ngFor="let item of numbers; let i = index;">
   <p> This is a repeated paragraph: {{numbers.length-i-1}} </p>
   </div>

2. Bạn cũng có thể tạo một danh sách đảo ngược trong tệp TypeScript:

   export class ExampleClass implements OnInit {
   numbers: Array<number> = [];
   reversedList: Array<number> = [];
   constructor() {
   this.numbers = Array(10).fill(1).map((x,i)=>i);
   this.reversedList = this.numbers.slice().reverse();
   }
   }

3. Lặp lại danh sách đã đảo ngược bằng cách sử dụng ngFor:

   <div *ngFor='let item of reversedList; let i = index'>
   <p> This is a repeated paragraph: {{item}} </p>
   </div>

Cách tạo kiểu cho phần tử đầu tiên và phần tử cuối cùng khác nhau

Bạn có thể tạo kiểu cho phần tử đầu tiên và phần tử cuối cùng riêng biệt với các phần tử khác bằng cách sử dụng Đầu tiên và Cuối cùng Các biến góc. Đây là một giải pháp thay thế cho việc sử dụng các lớp psuedo CSS như : con đầu lòng.

1. Trong câu lệnh ngFor, khai báo biến đầu tiên và biến cuối cùng. Sử dụng chỉ thị ngClass để gán các lớp CSS màu xanh lam và màu đỏ trong các bước trước. Gán lớp CSS màu xanh lam cho phần tử đầu tiên và lớp CSS màu đỏ cho phần tử cuối cùng:

   <div *ngFor='let item of numbers; let first = first; let last = last' [ngClass]= "{blue: first, red: last}"> 
   <p> This is a repeated paragraph: {{item}} </p> 
   </div>

Cách sử dụng ngFor để lặp lại trên các đối tượng

Bạn có thể sử dụng chỉ thị ngFor để lặp qua các đối tượng và truy cập các biến riêng lẻ của chúng.

1. Tạo danh sách các đối tượng trong tệp TypeScript. Trong trường hợp này, sẽ có một danh sách những người với thông tin chi tiết của họ:

   export class ExampleClass implements OnInit {
   people = []; 
   constructor() {
   this.people = [
   { firstName: 'John', lastName: 'Smith', occupation: 'HR Manager', startDate: new Date("2019-02-05") },
   { firstName: 'Mary', lastName: 'Johnson', occupation: 'Technical Officer', startDate: new Date("2016-01-07") },
   { firstName: 'William', lastName: 'Brown', occupation: 'HR Officer', startDate: new Date("2018-03-03") },
   ];
   }
   }

2. Trong HTML, sử dụng vòng lặp ngFor để lặp qua danh sách mọi người. Mỗi người sẽ có thể truy cập bằng cách sử dụng người Biến đổi. Bạn có thể sử dụng biến người để truy cập các thuộc tính của từng người:

   <div *ngFor='let person of people; let i = index'>
   <h2> {{person.firstName}} {{person.lastName}} </h2>
   <p> {{person.occupation}} </p>
   <p> {{person.startDate}} </p>
   </div>

Cách sử dụng ng để hiển thị các đối tượng bên trong các đối tượng khác

Bạn có thể sử dụng vòng lặp for lồng nhau để hiển thị các đối tượng bên trong các đối tượng khác.

1. Sửa đổi danh sách mọi người. Mỗi người sẽ có một danh sách liên hệ khẩn cấp. Lưu trữ mỗi số liên lạc khẩn cấp như một đối tượng riêng biệt:

   this.people = [
   {
   firstName: 'John',
   lastName: 'Smith',
   emergencyContacts: [
   { name: 'Amanda Smith', relationship: 'Wife', phone: '0441239876' },
   { name: 'Barry Smith', relationship: 'Son', phone: '0442239876'}
   ]
   },
   {
   firstName: 'Mary',
   lastName: 'Johnson',
   emergencyContacts: [
   { name: 'Mark Johnson', relationship: 'Husband', phone: '0443239876' }
   ]
   },
   ];

2. Trong HTML, hãy tạo một vòng lặp lồng nhau bên trong vòng lặp ban đầu của bạn để lặp qua từng liên hệ khẩn cấp và hiển thị chi tiết của họ:

   <div *ngFor='let person of people; let i = index'>
   <h2> {{person.firstName}} {{person.lastName}} </h2>
   <div *ngFor='let contact of person.emergencyContacts; let j = index'>
   <h5> Emergency Contacts: </h5>
   <p> {{contact.name}} </p>
   <p> {{person.relationship}} </p>
   <p> {{person.phone}} </p>
   </div>
   <br>
   </div>

Looping bằng cách sử dụng ngFor trong Angular

Bạn có thể sử dụng chỉ thị cấu trúc ngFor để động lặp qua các phần tử HTML trên trang web của mình. Điều này sẽ cho phép bạn lặp lại cùng một khối cho một số đối tượng hoặc trong một số lần xác định.

Bạn cũng có thể sử dụng nó để thực hiện các thủ thuật khác như bỏ qua mọi số chẵn hoặc lẻ hoặc tạo kiểu cho phần tử đầu tiên và cuối cùng. Bạn cũng có thể sử dụng nó để hiển thị động nhiều đối tượng trong các đối tượng khác.

Có những chỉ thị Angular khác mà bạn có thể sử dụng để giúp làm cho trang web của bạn năng động hơn. Chúng bao gồm ngIf, ngSwitch, ngStyle, ngClass và ngModel.