3

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

这是我的管道代码：[Snippet #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);
  }
}

以下是我在模板中使用它的方式：[Snippet #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 ？

4

1 回答 1

1

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

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

有关更多信息，请参阅： Angular 2 - 绑定不能包含分配

于 2017-05-12T21:14:32.187 回答