在 Angular 5 中使用 ngFor 过滤 Table

Question

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

Answer 1

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

Answer 2

是的，在 ngFor 中使用管道是非常令人沮丧的，并且会导致性能下降，

仅用于过滤或排序列表，因为 angular 中没有用于此的内置管道。这是因为它们表现不佳并且无法进行激进的缩小，这意味着它会在不改变其功能的情况下从源代码中删除所有不必要的字符。 过滤，尤其是排序是昂贵的操作。

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

创建自己的此类管道总是更好

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

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