Directive for trong Angular

Giả sử chúng ta có một mảng:

export class AppComponent {
	public arr: string[] = ['a', 'b', 'c', 'd'];
}

Hãy lặp qua mảng này bằng vòng lặp trong tệp template. Để làm điều này, directive *ngFor được sử dụng. Nó có thể lặp qua mảng và xuất ra từng phần tử của nó trong một thẻ riêng biệt.

Đầu tiên, directive này cần được import:

import {NgFor} from "@angular/common";

Và thêm nó vào phần imports trong decorator:

@Component({
	.....
	imports: [....., NgFor],
	....
})

Bây giờ có thể sử dụng nó. Hãy xem cách thực hiện. Giả sử chúng ta có danh sách ul:

<ul>

</ul>

Hãy làm sao cho mảng của chúng ta được lặp qua trong vòng lặp và mỗi phần tử của nó được xuất ra trong các thẻ li. Điều này được thực hiện như sau:

<ul>
	<li *ngFor="let el of arr">
		{{ el }}
	</li>
</ul>

Cho mảng:

export class AppComponent {
	public arr: number[] = [1, 2, 3, 4, 5];
}

Hãy xuất mỗi phần tử của mảng này trong một đoạn văn riêng biệt.

Hãy sửa đổi bài toán trước sao cho các đoạn văn xuất ra bình phương của các phần tử mảng của chúng ta.