Создайте собственный канал для фильтрации значений с помощью предиката в angular

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


person Dartz    schedule 12.05.2017    source источник


Ответы (1)


Лучшего решения нет. Парсер Angular не поддерживает объявление таких методов как часть какой-либо привязки — по-видимому, для того, чтобы люди не писали большие функции в своих шаблонах, поскольку предполагается, что контроллер хранит эту логику.

Я думаю, что этот вариант использования ближе к серой зоне, чем большинство, но Angular достаточно самоуверен в этом отношении, и они не позволят вам попробовать.

Для получения дополнительной информации см. это: Angular 2 - привязки не могут содержать назначения

person chrispy    schedule 12.05.2017