Gọi Component trong Vòng Lặp trong Angular

Bạn cũng có thể gọi component trong một vòng lặp, truyền cho nó các tham số khác nhau thông qua các thuộc tính. Hãy thử thực hành. Giả sử chúng ta có thuộc tính sau chứa người dùng:

interface User {
	name: string,
	age: number
}

class UserComponent {
	public users: User[] = [
		{
			name: 'user1',
			age: 25,
		},
		{
			name: 'user2',
			age: 26,
		},
		{
			name: 'user3',
			age: 27,
		},
	];
}

Hãy lặp qua mảng người dùng, trong mỗi lần lặp gọi component con với đối tượng user và truyền cho nó tên và tuổi làm tham số:

<div *ngFor="let user in users">
	<user-data [name]="user.name" [age]="user.age"></user-data>
</div>

Cho mảng sản phẩm sau:

interface Product {
	name: string,
	cost: number
}

class ProductComponent {
	public products: Product[] = [
		{
			name: 'prod1',
			cost: 100,
		},
		{
			name: 'prod2',
			cost: 200,
		},
		{
			name: 'prod3',
			cost: 300,
		},
	];
}

Hãy lặp qua mảng này, mỗi lần tạo một component mới với thông tin sản phẩm.