在ngFor中按值过滤项目而不编写管道

Posted 2023-02-22

【中文标题】在ngFor中按值过滤项目而不编写管道

【英文标题】：Filtering items by value inside ngFor without writing Pipes

【发布时间】：2018-05-04 13:05:08

【问题描述】：

我有以下组件：

class MyComponent 
  public mode = 'v';
  readonly modes = ['v', 'a', 'd'];
  ....

现在我想使用ngFor 来显示modes 中所有模式的按钮，除了mode 中存储的当前模式。我有以下代码：

<button *ngFor="let othermode of modes">
   othermode 
</button>

我总是希望显示两个按钮，包含其余 2 种模式。我试过这个：

<button *ngFor="let othermode of modes.filter(elem => elem !== this.mode)">
   othermode 
</button>

但它不起作用。我看到的所有问题都需要为此功能编写自定义管道，但是没有任何简单的方法来过滤字符串数组，只使用值？

【参考方案1】：

使用过滤函数过滤数据：

filterFunction(allButtons): any[]   
    return allButtons.filter(buttom => buttom !== this.mode);

在模板中：

<button *ngFor="let othermode of filterFunction(modes)">
   othermode 
</button>

要过滤对象，我建议使用现有组件。看到这个帖子：

::链接已编辑::

https://stackblitz.com/edit/angular-ivy-wngx-filter

https://stackblitz.com/edit/article-demo

【讨论】：

这是 Angular 开发者向 v6+ 发展的建议方式。 no filter/orderBy pipes 对他们来说，这个决定是由于生产部署的缩小以及非纯管道带来的重大性能问题（每次更新都重新运行管道）。他们还评论说，他们更喜欢将逻辑从 html 中转移到 typescript 中......所以我会以这种方式思考未来的任何发展，以帮助防止弃用！

@Elysiumplain 似乎这已经改变了？您的链接现在指向一个页面，其中包含一个创建管道以根据英雄是否飞行来过滤英雄的示例。

@Elysiumplain，你是对的，链接已损坏，现在它已更新为 stackblitz 上的示例实现

@WedsonQuintanilhadaSilva 是的，不错的更新，包含工作测试空间链接！

【参考方案2】：

你可以使用：

<ng-container *ngFor="let othermode of modes">
  <button *ngIf="othermode!=mode">
     othermode 
  </button>
</ng-container>

【讨论】：

@Dane，很高兴来到这里 :)

这不是正确的解决方案，因为当您不想显示列表时为什么需要迭代列表。最好先过滤列表。

【参考方案3】：

使用 ng-template 和 ngIf，如果你想用条件迭代数组。 下面是示例代码。你可以找到working version here

<ng-template ngFor let-othermode [ngForOf]="modes">
<button *ngIf="othermode!=mode">
   othermode 
</button>
</ng-template>

【讨论】：

"let-" is only supported on template elements. 错误

它在 stackblitz 中工作。你试过样品吗？