angular - 创建自定义管道以使用 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))">

但是在运行时，我得到这个错误:[Snippet #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 的解析器不支持将这样的方法声明为任何绑定(bind)的一部分——大概是这样人们就不会在他们的模板中编写大型函数，因为 Controller 应该持有该逻辑。

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

有关更多信息，请参阅: Angular 2 - Bindings cannot contain assignments