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:

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,
    },
  ]; 
}

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

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,
    },
  ]; 
}