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为true，我想显示我的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>

Answer 2

尝试一下

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

在Angular / Typescript的* ngFor内添加if else子句

2 个答案: