Вызов компонента в цикле в Angular

Можно также вызывать компонента в цикле, передавая ему в атритбуты различные параметры. Давайте попробуем на практике. Пусть у нас есть следующее свойство с юзерами:

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

Переберем юзеров циклом, в каждой итерации вызывая дочерний компонент с юзером и передавая ему параметрами имя и возраст:

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

Дан следующий массив с продуктами:

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

Переберите циклом этот массив, каждый раз создавая новый компонент с продуктом.