Я хотел бы создать собственный канал в 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?