角2フィルタng人生のユーザーの入力に応じて要素？

Question

は、それぞれkeyup eventの後にライブユーザ入力に従って* ngForを使用してレンダリングされた要素をフィルタリングするプラグインですか？

Answer 1

プラグインは必要ありません。

2つの方法：

• （より良いパフォーマンスを！）フィルタ機能を使用して、データのフィルタ配列を持つ

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
     <input (keyup)="search($event.target.value)" /> 
     <div *ngFor="let d of filteredData"> 
     {{ d }} 
     </div> 
    </div> 
    `, 
}) 
export class App { 
    name:string; 
    data = [ 
    "val1", 
    "val2", 
    "val3", 
    "val4", 
    "val5", 
    "val6", 
    "test", 
    "huhu" 
    ]; 
    filteredData = this.data; 

    constructor() { 
    this.name = 'Angular2' 
    } 

    search(val: any) { 
    if (!val) this.filteredData = this.data; 

    this.filteredData = this.data.filter(d => d.indexOf(val) >= 0); 
    } 
} 

ライブデモ：https://plnkr.co/edit/9NtT6Z4RIg4BR1BVfh7r?p=preview

• をまたはPipe

@Pipe({ name: 'filter' }) 
export class FilterPipe implements PipeTransform { 
    public transform(values: any[], filter: string): any[] { 
    if (!values || !values.length) return []; 
    if (!filter) return values; 

    return values.filter(v => v.indexOf(filter) >= 0); 
    } 
} 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
     <input [(ngModel)]="filterString" /> 
     <div *ngFor="let d of (data | filter: filterString)"> 
     {{ d }} 
     </div> 
    </div> 
    `, 
}) 
export class App { 
    name:string; 
    data = [ 
    "val1", 
    "val2", 
    "val3", 
    "val4", 
    "val5", 
    "val6", 
    "test", 
    "huhu" 
    ]; 

    filterString = ''; 

    constructor() { 
    this.name = 'Angular2' 
    } 
} 

ライブデモ：https://plnkr.co/edit/usgvA1hpqQ06zJxMrx4f?p=preview