将ngFor变量传递给嵌套组件

Question

在我的父组件内部Property-page.component.html中，我遍历propertiesArray，并希望基于它显示property-card的列表。

<property-card
    *ngFor="let propertiesItem of propertiesArray"
    [propertiesItem] = "propertiesItem"
></property-card>

Property-card.component.ts：

export class PropertyCardComponent implements OnInit {
    @Input() propertiesItem: any;
    constructor() {}
    ngOnInit() {}
}

Property-card.component.html：

<div class="upload-card-content">
    <mat-card-header>
        <mat-card-title>{{ propertiesItem.id }}</mat-card-title>
    </mat-card-header>
    <mat-card-content>{{ propertiesItem.designation }}</mat-card-content>
        <mat-card-footer>
            <span class="icon-icon_calendar"></span>
            Period:
            <span class="period">{{ propertiesItem.period }}</span>
        </mat-card-footer>
</div>

问题

出于某种原因； propertiesItem是子组件中的undefined。有人可以解释我错过的事情吗？

Answer 1

尝试将*ngIf添加到子组件，如下所示：

<div class="upload-card-content" *ngIf="propertiesItem">
      <mat-card-header>
          <mat-card-title>{{ propertiesItem.id }}</mat-card-title>
      </mat-card-header>
      <mat-card-content>{{ propertiesItem.designation }}</mat-card-content>
      <mat-card-footer>
          <span class="icon-icon_calendar"></span>
          Period:
          <span class="period">{{ propertiesItem.period }}</span>
      </mat-card-footer>
</div>