如何过滤 JSON 对象取决于角度 2 中的键名？

Question

在我的 Angular 2 应用程序中，标题是动态设置的。我整理了我的 JSON 数据，如附图所示。我想使用表格标题作为搜索词过滤整个数据（例如：名称或职位或分机）。

我将我的结果数据分离为键和值，例如：

this.keys= Object.keys(this.ResultData_search[0])` // my table heading false here
in my template :
<table>
<tr>
<th *ngFor=" let key of keys,let i=index"></th>
</tr>
<tr *ngFor=" let res of ResultData_search  ,let i = index" style="height: 35px;">
                        <td>{{i+1}}</td>
                        <td *ngFor=" let key of keys ">
                            {{res[key]}}
                        </td>


                    </tr>

</table

我这样做是因为我的 JSON 数据不是静态的。我必须动态设置表格标题和数据。

Answer 1

您必须使用带有数组参数的管道，其中包含每个标题的过滤器。 在管道中，您可以为每个标题动态过滤数据。

假设您有以下组件，其数据结构与您的类似。它有一个 IFilter 类型的过滤器数组：

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-filter',
  templateUrl: './filter.component.html',
  styleUrls: ['./filter.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class FilterComponent implements OnInit {

  data: Array<Map<string, string>>;
  headers: Array<string>;
  filters: Array<Ifilter>;
  constructor() {
  }

  ngOnInit() {

    this.data = new Array(
      new Map([["header1", "value11"], ["header2", "value12"], ["header3", "value13"], ["header4", "value14"], ["header5", "value15"]]),
      new Map([["header1", "value21"], ["header2", "value22"], ["header3", "value23"], ["header4", "value24"], ["header5", "value25"]]),
      new Map([["header1", "value31"], ["header2", "value32"], ["header3", "value33"], ["header4", "value34"], ["header5", "value35"]])
    );
    this.headers = Array.from((this.data[0]).keys());
    this.filters = new Array({header:"header1",filter:""},{header:"header2",filter:""},{header:"header3",filter:""},{header:"header4",filter:""},{header:"header5",filter:""})

  }

}
 export interface Ifilter{
    header : string;
    filter : string;
  }

然后为每个标题定义以下管道和过滤器。

import { Pipe, PipeTransform } from '@angular/core';
import { Ifilter } from "app/filter/filter.component";

@Pipe({
  name: 'pipeFilter',
  pure: false
})
export class FilterPipe implements PipeTransform {

  transform(data: Array<Map<string, string>>, filters: Array<Ifilter>): Array<Map<string, string>> {
    let filteredData = Array<Map<string, string>>();
    for (let row of data) {
      let exclude: boolean = false;
      for (let filter of filters) {
        if (filter.filter != '' && row.get(filter.header).indexOf(filter.filter) == -1) {
          exclude = true;
          break;
        }
      }
      if (!exclude)
        filteredData.push(row);

    }
    return filteredData;
  }
}

最后，使用此模板显示表格。
使用双向绑定[(NgModel)] 获取过滤器，并将它们作为参数传递给 *ngFor 上的管道：*ngFor="let rows of data | pipeFilter:filters"。 ：

  <table *ngIf="data && data.length">
    <th *ngFor="let header of headers">
      {{header}}
    </th>
    <tr>
      <td *ngFor="let filter of filters;let i=index">

       <input  type='text' [(ngModel)]='(filters[i]).filter' />

      </td>
    </tr>
    <tr *ngFor="let rows of data | pipeFilter:filters">
      <td *ngFor="let header of headers ">
        {{rows.get(header)}}
      </td>
    </tr>
  </table>

模板和管道都是完全动态的，可以处理任何标题。

请注意， 菲利普