Передайте переменную ngFor во вложенный компонент - PullRequest
Новая
       8

Передайте переменную ngFor во вложенный компонент

1 голос
/ 10 января 2020

Внутри моего родительского компонента 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 в дочернем компоненте. Может кто-нибудь объяснить, что я пропустил?

1 Ответ

1 голос
/ 10 января 2020

Попробуйте добавить *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>
...