在ngFor中添加where条件

Question

我循环遍历一个数组，但是只想显示一个元素的子集。

我正在使用此代码循环遍历active

的每个元素

<div *ngFor="let p of (active | keys)">
    {{ p.name }}
</div>

这是一些伪代码，用于演示我在寻找的内容：

<div *ngFor="let p of (active | keys) where p.age > 18">
    {{ p.name }}
</div>

是否有任何方法可以指定条件，以便只显示p.age > 18的条件？

我知道我可以在循环中使用*ngIf，但我很想知道我是否可以在*ngFor

中应用我的条件

Answer 1

通常作为一种良好的做法，你应该尽可能减少视图中的逻辑。有了这个，我会过滤组件上的数组，然后在视图上迭代它。

如果需要，可以保留原始数组，然后为过滤后的数组创建一个getter

get filterByAge() {
  return active.filter( x => x.age > 18);
}

然后在你的循环中做

<div *ngFor="let p of filterByAge">
{{ p.name }}

Answer 2

从视图中完全可以过滤出以下内容

<ng-container *ngFor="let p of (active | keys)">
    <div *ngIf="p.age > 18">
        {{ p.name }}
    </div>
</ng-container>