JSONオブジェクトをフィルタリングする方法は、角度2のキー名に依存しますか？

Question

私の角2のアプリケーションでは、ヘッダーが動的に設定されています。添付の画像に示すようにJSONデータを整理しました。検索用語（例：名前または位置または拡張子）として表見出しを使用して、データ全体をフィルタリングする必要があります。

私は次のようにキーと値に私の結果データを分離しています：私の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 

です。テーブル見出しとデータを動的に設定する必要があります。

Answer 1

各ヘッダーのフィルターを含むArrayパラメーターを持つパイプを使用する必要があります。 パイプでは、ヘッダーごとにデータを動的にフィルタリングできます。

あなたと同様のデータ構造を持つ次のコンポーネントがあるとします。それはタイプの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> 

テンプレートとパイプの両方が完全に動的であり、任意のヘッダを処理することができます。

リガード、 フィリップ

の