フィルター付き（パイプ付き）リストの入手方法？

Question

私はフィルタリングするパイプを持っている：

@Pipe({ 
name: 'filter' 
}) 
export class FilterPipe implements PipeTransform { 
transform(items: Array<any>, filter: { [key: string]: any }): Array<any> { 
    return items.filter(item => { 
     let notMatchingField = Object.keys(filter) 
      .find(key => item[key] !== filter[key]); 
     return !notMatchingField; // true if matches all fields 
    }); 
} 


} 

をし、私はanotherpage.htmlに私のリストをフィルタリングしています：

this.peopleFilter = { NAME: 'Gülcan' }; 

：anotherpage.tsで

<tr *ngFor="let item of _FilteredList | filter:peopleFilter" >

iはpeopleFilterのコンテキストを検出します

私はそれを実行する、私はすべてのオブジェクトを取得する私のテーブルに 'Gülcan'の名前です。しかし私は私の別のページに書いた：console.log(this._FilteredList)私はそのリストのすべての項目を参照してください。これらのフィルタリングされたアイテムだけを表示するにはどうしますか？

Answer 1

フィルタ用にこのコードを試してください。それは私の作品：

import {Pipe, PipeTransform} from '@angular/core'; 

@Pipe({ 
    name: 'filterPipe' 
}) 
export class FilterPipe implements PipeTransform { 
    transform(data: any[], keys: string[], filter: string) { 
     if (!filter || !keys || keys.length <= 0) { 
      return data; 
     } else { 
      return data.filter((elem) => { 
       var matched = false; 
       for (let key of keys) { 
        matched = matched || elem[key].toLocaleLowerCase().indexOf(filter.toLocaleLowerCase()) !== -1 
        if (matched) { 
         return true; 
        } 
       } 
       return matched; 
      }); 
     } 
    } 
} 

UPDATE HTML：

<tr *ngFor="let item of (_FilteredList | filterPipe:peopleFilter)"> 

Answer 2

フィルターは、元の配列を変更しません。別の配列を生成し、それをテンプレートにレンダリングします。現在のところ、アクセスする方法はありませんが、それは本当に必要ではないと私は考えています。あなたのコードでフィルタリングされた配列が必要な場合は、そこに置いて元のものではなくテンプレートにレンダリングします。

だから、何が欲しいのはこのようなものです：

app.component.ts

import {Component} from '@angular/core'; 
import {AppFilter} from './filter.pipe'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    items: any[] = []; 
    filteredItems: any[] = []; 
    private _filterId: string; 
    get filterId(): string { 
     return this._filterId; 
    } 
    set filterId(val: string) { 
     this._filterId = val; 
     this.filteredItems = this.filter.transform(this.items, {id: val}); 
    } 
    constructor(private filter: AppFilter) { 
     this.items = [ 
      { 
       id: '1', 
       text: 'item 1' 
      }, 
      { 
       id: '2', 
       text: 'item 2' 
      } 
     ]; 
     this.filterId = '1'; 
    } 
} 

app.component.html

<div> 
    <input type="text" [(ngModel)]="filterId" /> 
    <div *ngFor="let item of filteredItems">{{item.text}}</div> 
</div> 

app.module .ts

import {BrowserModule} from '@angular/platform-browser'; 
import {NgModule} from '@angular/core'; 

import {AppComponent} from './app.component'; 
import {FormsModule, ReactiveFormsModule} from '@angular/forms'; 
import {AppFilter} from './filter.pipe'; 

@NgModule({ 
    declarations: [ 
     AppComponent, 
     AppFilter 
    ], 
    imports: [ 
     BrowserModule, 
     FormsModule, 
     ReactiveFormsModule 
    ], 
    providers: [AppFilter], // <--- !!! it must be provided by some component or module 
    bootstrap: [AppComponent] 
}) 
export class AppModule { 
} 

filter.pipe.ts

import {Pipe, PipeTransform} from '@angular/core'; 

@Pipe({ 
    name: 'filter' 
}) 
export class AppFilter implements PipeTransform { 
    transform(value: any, filter: {[key: string]: any}): any { 
     if (!value || !filter) { 
      return value; 
     } 
     return value.filter(item => { 
      return !Object.keys(filter).find(key => filter[key] && (item[key] !== filter[key])); 
     }); 
    } 
}