Флажок угловой материал оптимизировать проверку с использованием трубы

Question

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

для этого им используется функция existInArray(element, array): boolean, которая проверяет, находится ли фильтр в массиве фильтров, и возвращаетtrue или false

Проверить, активен ли фильтр

  public existInArray(element, array: Array<string>): boolean {
    if (!element) {
      return;
    }
    return array.indexOf(element.toString()) > -1;
  }

Шаблон флажка

<div class="filter-list-container m-top">
      <div *ngFor="let assignment of (filterService.getFilter(filterType.FILTER_ASSIGNMENT).items.ToArray() | filterQuery: filterOptions.assignments | sortBy: configService.config.sortUserBy:'assignment')">
         <mat-checkbox [checked]="existInArray(assignment.id, filterService.filterAssignment)"
            [ngClass]="{ 'checkbox-ie': platform.TRIDENT }"
            (change)="filterBy(filterType.FILTER_ASSIGNMENT, assignment.id, filterService.filterAssignment, assignment.name)"
            [value]="assignment.id">
             <div class="assigned">
               <user-image [inline]="true" [user]="assignment.assignment"></user-image>
                <p class="assigned-name">{{ assignment.name }}</p>
              </div>
            </mat-checkbox>
           </div>
          </div>

Теперь функцияработает просто отлично, ошибки нет, но здесь есть проблема, и из-за обнаружения углового изменения, функция вызывается более 1000 раз, поэтому я подумал, может быть, использовать канал, но по какой-то причине это не такработать, любая идея, каким другим способом я могу сделать это или, возможно, способ оптимизировать (на случай, если я использую угловой материал для компонентов флажка).

Answer 1

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

Труба

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

@Pipe({
  // tslint:disable-next-line:pipe-naming
  name: 'checkActiveCheckbox'
})
export class CheckActiveFilterPipe implements PipeTransform {
  transform(value: any, arg?: Array<any>, change?: any): any {
    console.count('Filter PIPE');
    if (!value) {
      return;
    }
    return arg.indexOf(value.toString()) > -1;
  }
}

Шаблон

    <div class="filter-list-container m-top">
      <div
        *ngFor="let assignment of (filterService.getFilter(filterType.FILTER_ASSIGNMENT).items.ToArray() | filterQuery: filterOptions.assignments | sortBy: configService.config.sortUserBy:'assignment')">
        <mat-checkbox
          [checked]="assignment.id | checkActiveCheckbox:filterService.filterAssignment:filterService.filterAssignment.length"
          [ngClass]="{ 'checkbox-ie': platform.TRIDENT }"
          (change)="filterBy(filterType.FILTER_ASSIGNMENT, assignment.id, filterService.filterAssignment, assignment.name)"
          [value]="assignment.id">
          <div class="assigned">
            <user-image [inline]="true" [user]="assignment.assignment"></user-image>
            <p class="assigned-name">{{ assignment.name }}</p>
          </div>
        </mat-checkbox>
      </div>
    </div>