创建自定义管道以使用 angular 中的谓词过滤值

Question

我想在 angular 4.x 中创建一个自定义管道，它将谓词函数作为参数，以便从数组中过滤值。

这是我的管道代码：[片段#1：mypipe.ts]

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {
  transform(values: any[], predicate: (any) => boolean): any {
    return values.filter(predicate);
  }
}

以下是我在模板中使用它的方式：[代码段 #2：mycomponent.html]

<div *ngFor="let item of (items | filter:(x=>x.isValid))">

但在运行时，我收到此错误：[代码段 #3]

Error: Uncaught (in promise): Error: Template parse errors:
Parser Error: Bindings cannot contain assignments at column 44 in [let item of (items | filter:(x=>x.isValid))]

我通过在我的组件中创建一个 isValid() 函数并将此函数用作我的过滤器的参数来解决这个问题：

[代码段 #4：mycomponent.ts]

isItemValid(item): boolean {
  return item.isValid;
}

[代码段 #5：mycomponent.html]

<div *ngFor="let item of (items | filter:isItemValid)">

但我不太喜欢这个选项，因为我认为它的可读性不如箭头函数（你必须切换到 component.ts 文件才能了解 component.html 中将过滤的内容).

是否有更好的解决方案看起来像代码段#2？

Answer 1

没有更好的解决方案。 Angular 的解析器不支持将这样的方法声明为任何绑定的一部分——大概是这样人们就不会在他们的模板中编写大型函数，因为控制器应该持有该逻辑。

我认为这个用例比大多数用例更接近灰色区域，但 Angular 在这方面固执己见，他们不会让您尝试。

有关详细信息，请参阅此内容：

创建自定义管道以使用 angular 中的谓词过滤值

Create a custom pipe to filter values with a predicate in angular

predicate

angular-template

arrow-functions

angular-pipe

angular