Угловая 7 фильтров

Question

У меня есть следующий угловой компонент:

  private json: JsonResponseDTO;

  constructor(private dtoService: PoolDTOServiceService) {
  }

  ngOnInit() {
    this.dtoService.setJsonResponse();
    this.getPool();
  }

  getPool() {
    this.json = this.dtoService.jsonResponse;
  }

json содержит пулы элементов, которые являются массивом. Этот должен быть отфильтрован по имени, которое вводится на входе. (Я не показываю HTML, поскольку это не имеет отношения к делу).
Я хочу иметь возможность «удалить» мои критерии поиска, поэтому первоначальный подход:

  private json: JsonResponseDTO;
private filterJson: JsonResponseDTO;

  constructor(private dtoService: PoolDTOServiceService) {
  }

  ngOnInit() {
    this.dtoService.setJsonResponse();
    this.getPool();
  }

  getPool() {
    this.json = this.dtoService.jsonResponse;
    this.filterJson = this.json;
  }

  filter(filterCriteria: String) {
    this.filterJson = this.json;
    this.filterJson.pools.filter((element) => element.name === filterCriteria);
  }

и затем привяжите filterJson к HTML DOM.
Есть ли более чистый способ сделать это? Я хочу не запрашивать новый JSON каждый раз, когда отфильтрованное имя «удаляется», так как данные требуют времени для извлечения.

Answer 1

Вы можете использовать трубу для фильтрации, она будет намного чище, просто добавьте трубу перед директивой * ngFor.

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {
  transform(value: any, field: string, input: string) {
    if (input !== undefined && input.length >= 2) {
      input = input.toLowerCase();
      if (typeof value[0] === 'string') {
        return value.filter(function(el: any) {
          return el.toLowerCase().indexOf(input) > -1;
        });
      }
      return value.filter(function(el: any) {
        return el[field].toLowerCase().indexOf(input) > -1;
      });
    }
    return value;
  }
}

Добавьте эту трубу, и в HTML, где когда-либо вам нужно фильтровать

<div *ngFor="let val of filterJson | filter: "filterCriteria""> </div>

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

Answer 2

filter(filterCriteria: String) {
    this.filterJson = {...this.json, pools: pools.filter((element) => element.name === filterCriteria);
}

Вы могли бы написать это немного чище, используя распространение и изменив свойство пулов, как указано выше.

Я предполагаю, что вы должны сохранить кэшированную копию оригинального 'this.json' для случая сброса фильтров.