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:

app/user/user.component.tsinterface 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:

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

typescriptinterface Product {
  name: string,
  cost: number
}

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