Memanggil Komponen dalam Gelung di Angular

Anda juga boleh memanggil komponen dalam gelung, menyampaikan pelbagai parameter kepadanya melalui atribut. Mari kita cuba secara praktikal. Katakan kita mempunyai sifat berikut dengan pengguna:

interface User {
	name: string,
	age: number
}

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

Mari kita ulangi pengguna dengan gelung, dalam setiap lelaran memanggil komponen anak dengan pengguna dan menyampaikan nama dan usia sebagai parameter kepadanya:

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

Diberi tatasusunan berikut dengan produk:

interface Product {
	name: string,
	cost: number
}

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

Ulangi tatasusunan ini dengan gelung, setiap kali mencipta komponen baru dengan produk.