Question

我有以下Angular组件：

  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);
}

您可以通过使用spread并如上所述更改pools属性来使其更加简洁。

我假设在重置过滤器的情况下，您应该保留原始“ this.json”的缓存副本。

Angular 7滤镜阵列

2 个答案: