在Angulation/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>

如果布尔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>