在 Angular 5 中使用 ngFor 过滤表答案

【问题标题】：Filtering Table with ngFor in Angular 5在 Angular 5 中使用 ngFor 过滤表
【发布时间】：2018-05-28 18:12:34
【问题描述】：

必须在 Angular 应用程序中实现各种数据过滤器，该应用程序使用 Table 和 ngFor 显示数据。已经经历了各种方式，例如在 Type Script 中使用 Pipe 的各种方式，但在 Angular 文档中发现不鼓励使用管道。如果是这样，那么哪个是在 Angular 中实现多个过滤器的最佳选择？。很想知道解决方案..

【问题讨论】：

你在哪里找到这个在角度文档中发现不鼓励使用管道
参考此链接。我希望它会帮助你。 Link
@AnuradhaGunasekara Link
@SuhailMoideen 希望这个答案对您有所帮助。 stackoverflow.com/questions/46780843/…

标签： angular typescript angular-filters

【解决方案1】：

是的，在 ngFor 中使用管道非常不鼓励和性能下降，

仅用于过滤或排序列表，因为没有角度的内置管道。这是因为它们表现不佳并阻止了激进的缩小，这意味着它会从源代码中删除所有不必要的字符而不改变其功能。过滤，尤其是排序是昂贵的操作。

Angular 团队和许多经验丰富的 Angular 开发人员强烈建议将过滤和排序逻辑移至组件本身。

最好自己创建这样的管道

网上有很多这样的例子，Angular 团队也解释的很好here

希望您理解，此性能问题仅适用于排序和过滤管道，而不适用于日期等内置管道。

【讨论】：

【解决方案2】：

将您的过滤器定义为 QueryArray ，数组的每个项目都有字段，运算符和值，然后对于循环的任何项目，将其添加或更新到 QueryArray

【讨论】：