Question

我想用ngFor创建卡片，但我也想使用ngIf。因此，如果数组为空，则必须显示一张卡片，上面写着“无标题！”。如果array包含一些值，那么卡片必须显示array的值。

<mat-card class="asd cardPardding" *ngFor="let title of titles">
  <p>
  {{title}}
  </p>
</mat-card>

但是使用此代码，它列出了数组项，如果我将ngIf包含在

中，则ngFor禁用卡项，因此没有任何意义。

我该怎么做？

Answer 1

使用Angular容器和模板：

<ng-container *ngIf="titles?.length; else noTitle">
  <mat-card class="asd cardPardding" *ngFor="let title of titles">
    <p>
    {{title}}
    </p>
  </mat-card>
</ng-container>

<ng-template #noTitle>
  <mat-card class="asd cardPardding">
    <p>
    No title !
    </p>
</mat-card>
</ng-template>

同时列出ngFor和ngIf的项目

1 个答案: