无法读取子组件中的 ngFor 数据，获取 属性 未定义

Question

我是angular6的新手， 我有一个父组件，其中有一个子组件，我在父组件中使用 ngFor 但无法使用组件中的属性。

parent.ts :-

this.dummyDataService.getCardInfo().subscribe(
    data => { 
      this.cardInfo = data;
      console.log(this.cardInfo);
    },
    err => console.error(err),
    () => console.log('done loading data')
);

parent.html:-

<card-tile class="grid-item grid-item" *ngFor="let item of cardInfo"></card-tile>

卡片-tile.html:-

    <li class="label-info" label="Enrolled On">{{item.enrolledOn}}</li>
    <li class="label-info" label="Contact">+91 {{item.contact}}</li>
    <li class="label-info" label="Consent">{{item.consent}}</li>

还尝试使用 Elvis 运算符：-

{{item?.enrolledOn}}

控制台错误：无法读取未定义的 属性 enrolledOn

请帮助我。

Answer 1

您需要设置 card-title.ts class 的 item 属性。像

<card-tile class="grid-item grid-item" *ngFor="let item of cardInfo" [item]="item"></card-tile>

应该可以。