Oproep van 'n komponent in 'n lus in Angular
Jy kan ook 'n komponent in 'n lus oproep, deur verskillende parameters aan hom in kenmerke oor te dra. Kom ons probeer dit in die praktyk. Laat ons die volgende eienskap met gebruikers hê:
interface User {
name: string,
age: number
}
class UserComponent {
public users: User[] = [
{
name: 'user1',
age: 25,
},
{
name: 'user2',
age: 26,
},
{
name: 'user3',
age: 27,
},
];
}
Laat ons deur die gebruikers itereer met 'n lus, en in elke iterasie 'n kindkomponent oproep met die gebruiker en die naam en ouderdom as parameters aan hom oor te dra:
<div *ngFor="let user in users">
<user-data [name]="user.name" [age]="user.age"></user-data>
</div>
Die volgende skikking met produkte word gegee:
interface Product {
name: string,
cost: number
}
class ProductComponent {
public products: Product[] = [
{
name: 'prod1',
cost: 100,
},
{
name: 'prod2',
cost: 200,
},
{
name: 'prod3',
cost: 300,
},
];
}
Itereer deur hierdie skikking met 'n lus, elke keer 'n nuwe komponent met die produk skep.