Значение Angular 4 Typescript для нескольких каналов - PullRequest
Новая
       19

Значение Angular 4 Typescript для нескольких каналов

0 голосов
/ 11 июня 2018

Я создал канал 'filterBy' и хочу использовать его в своем приложении.Почти все работает хорошо, но я хочу использовать этот канал для 5 свойств, и у меня нет возможности понять, как это сделать.Я постараюсь объяснить вам, что я имею в виду.

Моя труба 

import { Injectable, Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filterBy',
  pure: false
})

@Injectable()
export class FilterBy implements PipeTransform {
  transform( array: Array<any>, filterField: string, filterValue: string, filterField2: string, filterValue2: any): Array<any> {
    if (!array) return [];
    return array.filter(item => item[filterField] === filterValue);
  }
}

products.component.html 

<div class="col-sm-1 lessmargins" *ngFor="let product of products | filterBy: 'condition': 'new'"

Он работает хорошо, но у моего продукта есть такие свойства, как состояние, цены и т. Д. Например, я хотел бы показать продукты с «условием»: «новое» и «условием»: «используется», и я не знаю, каксделать это.Я попытался запустить его так: products.component.html 

*ngFor="let product of products | filterBy: {'condition': 'new'} && {'condition' : 'used'}"

Но это не работает :( это что-то не так с моей трубкой? Может кто-нибудь объяснить мне?

1 Ответ

0 голосов
/ 12 июня 2018

Добавьте все свойства, по которым вы хотите фильтровать, в массив и передайте этот массив в канал.Затем вы можете просто просмотреть массив свойств и проверить, что все совпадают.Ниже приведен пример:

Класс для ваших фильтров: 

export class Filter {
    public name: string;
    public value: any;
}

А затем просто создайте новые фильтры и отправьте их в массив фильтров.Вместо этого используйте массив в своей трубе: 

<div class="col-sm-12" *ngFor="let product of products | filterBy: filters">
</div>

И затем зациклите массив фильтров в своей трубе: 

import { Injectable, Pipe, PipeTransform } from '@angular/core';
import { Filter } from './filter';

@Pipe({
  name: 'filterBy',
  pure: false,
})
export class FilterBy implements PipeTransform {
  transform( array: Array<any>, filters: Array<Filter>): Array<any> {
    if (!array) return [];
    if (!filters) return array;

    return array.filter(item => matchAll(item, filters));
  }
}

function matchAll(item: any, filters: Array<Filter>): boolean {
  let valid = true;
  for (const filter of filters) {
    if (!hasKey(item, filter.name)
      || item[filter.name] !== filter.value) {
      valid = false;
      break;
    }
  }

  return valid;
}

function hasKey(item: any, keyName: string): boolean {
  return Object.keys(item).indexOf(keyName) !== -1;
}
...