フィルタを* ngforに適用する方法

角度基本
開発者として、学習に制限はありません.我々は常に最新の技術だけでなく、市場でトレンドになっている現在または現在の機能をする必要があります.
最近、アングルコードを最適化する最良の方法を探していました.私は記事の多くを行っていると我々はそれが無限の知っている.それから、私は私を助けて、他の人を助けるかもしれない角度のためにクリーナーコードを書くためのチェックリストを統合することを考えました.
これらの小さな記事は、より良いタイプスクリプトやJavaScriptコードを書くだけでなく、フロントエンド技術の概念をクリアするのに役立ちます.これはあなたの強力な基盤を構築し、今後のフロントエンドのインタビューに役立つことができます.
すべてのプログラミングの中で最も基本的なトピックの1つは、HTMLにサービスからデータを表示しています.我々はこれをサポートする様々なテクニックを使用します.この* ngfor用の広く使われているディレクティブの1つで、ループのように動作し、必要に応じてコンテンツを表示します.データを反復しながらフィルタを適用したい場合.レット・アゲイン™sは、これを成し遂げる方法の1つを見ます.
私たちは、はるかに大きなデータを持っているし、HTMLの複数のアイテムをフィルタリングしたい場合は、HTMLでの条件のようになりますので、フィルタリングを行うことができますし、データを与えるパイプを作成する方が良いです.
レット・アゲイン™フィルターパイプを作成する手順を確認します.
コンポーネント

filterargs = {title: 'hello'};
data= [{title: 'test abc'}, {title: 'test cde'}, {title: 'foo bar'}];

テンプレート
テンプレートで、あなたのパイプに文字列、数字、またはオブジェクトを渡すことができます.

<li *ngFor="let data of data| filter:filterargs">

パイプ

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

@Pipe({
    name: 'myfilter',
    pure: false
})
export class FilterPipe implements PipeTransform {
    transform(items: any[], filter: Object): any {
        if (!items || !filter) {
            return items;
        }
        // filter items array, items which match and return true will be
        // kept, false will be filtered out
        return items.filter(item => item.title.indexOf(filter.title) !== -1);
    }
}

アプリであなたのパイプを登録することを忘れないでください.モジュールです.TSあなたの@コンポーネントのパイプを登録する必要はありません

import { FilterPipe } from './shared/pipes/my-filter.pipe';

@NgModule({
    imports: [
        ..
    ],
    declarations: [
        FilterPipe,
    ],
    providers: [
        ..
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

参考文献
How to apply filters to *ngFor?
Apparently, Angular 2 will use pipes instead of filters as in Angular1 in conjunction with ng-for to filter results…stackoverflow.com