如何獲得過濾（帶管道）列表？

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：

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

在anotherpage.ts我發現peopleFilter的上下文：

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

所以我運行它，我得到所有與名稱對象是'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])); 
     }); 
    } 
}