Question

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

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

result = {}
      for wday in 1..7 do
        result[wday] = {}
        for hour in 0..23 do
          result[wday][hour] = {}
          for minute in 0..59 do
            result[wday][hour][minute] = 0
          end
        end
      end

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

Answer 1

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

假设您拥有与您的数据结构类似的以下组件。它有一个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>

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

方面，菲利普

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

1 个答案: