Angular 2で複数のパイプを同時に
Angular 2のプロジェクトに取り組んでいます。
複数のカラムを持つテーブルがあります。各カラムには、ソートのための異なるロジック（数値、string.lowercase、%およびINRのamountValue）があります。行は、そのカラムのソート・ロジックに基づいてソートされます。これを実現するために、私はいくつかの引数を持つsortTableという名前のカスタムパイプを使用しています。
同時に、上部にsearchTerm変数にバインドする入力フィールドがあります。searchTermでデータをフィルタリングするために、sortTableRowという別のカスタムパイプを使用しています。
非常に複雑ですが、非常に単純化されたスニペットです。
<input type="search" [(ngModel)]="searchTerm"/>
<table>
<thead>
<tr class="sortable-header">
<th data-key="status" data-dt="boolean">Status</th>
<th data-key="name" data-dt="string">Name</th>
<th data-key="code" data-dt="string">Code</th>
<th data-key="amountValue" data-dt="amount">Amount</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of rows | sortTable: sortType : {'key': key, 'dt': dt} | searchTableRow : searchTerm : ['name']">
<td> {{row.status}} </td>
<td> {{row.name}} </a> </td>
<td> {{row.code}} </td>
<td> {{row.amountValue}} </td>
</tr>
</tbody>
</table>どちらのパイプも個別には問題なく動作しています。カラムのヘッダーをクリックすると、クリックイベントハンドラでキーとdt(dataType)が変更され、それに応じて行がソートされます。ある単語を検索すると、結果がフィルタリングされ、目的の出力が表示されます。
しかし、FILTERED RESULTS (by searchTerm)をソートしようとすると、何も起こりません。この場合、2つのパイプが同時に機能していないのだと思います。私はこれらのパイプのいずれかを削除したくありません。
5
3
うーん、不思議だ。
もしそうでなければ、各パイプに console.log を設定し、それらが何を返すか見てみましょう。
パイプサインを使用して、パイプを適用することができます。 のように `` lang-js <div class="checkbox" *ngFor="let value of brand | filter:{名前：searchbrand}。| itemdisplayno: displayitems; let i = index">
これは、最初にリストをソートしてから、フィルタリングを適用しているために起こります。 この問題を解決するには、HTMLコードの中で、フィルターパイプをソートパイプの前に移動させるだけでよいのです。