angular - 在 Angular/Typescript 中的 *ngFor 中添加一个 if else 子句

Question

我目前正在使用 Typescript 在 Angular 7 中开发一个项目，我正在尝试优化以下(简化的)代码片段:

<div *ngIf="!showAll">

  <div *ngFor="let filter of filters | slice:0:5;">
    <mat-checkbox [checked]="filter.selected">{{ filter.value }}</mat-checkbox>
  </div>

</div>

<div *ngIf="showAll">

  <div *ngFor="let filter of filters">
    <mat-checkbox [checked]="filter.selected">{{ filter.value }}</mat-checkbox>
  </div>

</div>

如果 bool 值 showAll 为真，我想显示我的 filters 数组的所有值，如果不是，我想对该数组进行切片以仅获取前 5 个条目。这可以用一行代码实现吗？

Answer 1

您可以在多个条件下使用 ngIf 来实现这一点。

  <div *ngFor="let filter of filters ; let i = index">
    <mat-checkbox *ngIf="showAll || i < 5" [checked]="filter.selected">{{ filter.value }}</mat-checkbox>
  </div>