Aufruf einer Komponente in einer Schleife in Angular

Man kann eine Komponente auch in einer Schleife aufrufen, indem man ihr verschiedene Parameter in den Attributen übergibt. Lasst es uns praktisch ausprobieren. Nehmen wir an, wir haben die folgende Eigenschaft mit Benutzern:

interface User {
	name: string,
	age: number
}

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

Lasst uns die Benutzer in einer Schleife durchlaufen, in jeder Iteration eine Kindkomponente mit dem Benutzer aufrufen und ihr Name und Alter als Parameter übergeben:

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

Gegeben ist das folgende Array mit Produkten:

interface Product {
	name: string,
	cost: number
}

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

Durchlaufe dieses Array in einer Schleife und erstelle jedes Mal eine neue Komponente mit dem Produkt.