web-dev-qa-db-ja.com

angular2の配列のフィルタリング

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」を入力すると、更新されて対応する値が表示されます。

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

arraystypescriptpipefilteringangular
20
Witted

デフォルトのパイプを使用してそれを行う方法はありません。デフォルトでサポートされるパイプのリストは次のとおりです。 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>
  `
})

お役に立てばと思います、ティエリー

36
Thierry Templier

サンプルの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);
}

私のアプローチは、何らかの適格なイベントで配列を再計算することです。私の場合、それはキーアップです。関数またはフィルターにバインドすると便利に思えるかもしれませんが、代わりに配列に直接バインドすることをお勧めします。これは、変更追跡がトリガーされたものに関係なく、変更追跡がトリガーされるたびに関数/フィルターが新しい配列インスタンスを返すため、変更追跡が混乱するためです。

完全なソースは次のとおりです。 https://github.com/thelgevold/angular-2-samples/tree/master/components/spreadsheet

デモもあります： http://www.syntaxsuccess.com/angular-2-samples/#/demo/spreadsheet

5
TGH