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>

角材料复选框使用管道优化检查

1 个答案: