angular2で配列をフィルタリングする

Question

Angular2でデータの配列をフィルタリングする方法を検討しています。

私はカスタムパイプを使用しましたが、これは私が探しているものではないと感じています。大きなデータセットをフィルタリングするのではなく、簡単なプレゼンテーション変換に適しています。次のように

配列がアウトに設定されています

getLogs(): Array<Logs> { 
     return [ 
      { id: '1', plate: 'plate1', time: 20 }, 
      { id: '1', plate: 'plate2', time: 30 }, 
      { id: '1', plate: 'plate3', time: 30 }, 
      { id: '2', plate: 'plate4', time: 30 }, 
      { id: '2', plate: 'plate5', time: 30 }, 
      { id: '2', plate: 'plate6', time: 30 } 
     ]; 
    } 

は私がidで、これをフィルタリングします。したがって、検索バーに「1」を入力すると、対応する値が表示されます。

これを行う方法がある場合、私は知りたいです！

Answer 1

デフォルトのパイプを使用していることを実行する方法はありません。私もデモを持ってhttps://github.com/thelgevold/angular-2-samples/tree/master/components/spreadsheet

：

はここで完全なソースです。サポートされているパイプのリストは、デフォルトでhttps://github.com/angular/angular/blob/master/modules/angular2/src/common/pipes/common_pipes.tsです。

import {Injectable, Pipe} from 'angular2/core'; 

@Pipe({ 
    name: 'myfilter' 
}) 
@Injectable() 
export class MyFilterPipe implements PipeTransform { 
    transform(items: any[], args: any[]): any { 
     return items.filter(item => item.id.indexOf(args[0]) !== -1); 
    } 
} 

そして、それを使用します：

import { MyFilterPipe } from './filter-pipe'; 
(...) 

@Component({ 
    selector: 'my-component', 
    pipes: [ MyFilterPipe ], 
    template: ` 
    <ul> 
     <li *ngFor="#element of (elements | myfilter:'123')">(...)</li> 
    </ul> 
    ` 
}) 

は ティエリー

Answer 2

私は私のアプローチは、いくつかの予選イベントの配列を再計算することである私のサンプルの1

<input "(keyup)="navigate($event)" /> 

<div *ngFor="#row of visibleRows"></div>  

...... 

navigate($event){ 
     this.model.navigate($event.keyCode); 
     this.visibleRows = this.getVisibleRows(); 
} 

getVisibleRows(){ 
    return this.model.rows.filter((row) => row.rowIndex >= this.model.start && row.rowIndex < this.model.end); 
} 

で同様のシナリオがあります。私の場合はキーアップです。関数やフィルターにバインドすると便利かもしれませんが、代わりに配列に直接バインドすることをお勧めします。これは、変更トラッキングが発生したときに関係なく、変更トラッキングがトリガーされるたびに関数/フィルターが新しい配列インスタンスを返すため、変更トラッキングが混乱するためです。 http://www.syntaxsuccess.com/angular-2-samples/#/demo/spreadsheet