同时使用 ngFor 和 ngIf 列出项目

Question

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

<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>