web-dev-qa-db-ja.com

Angular 2で同時に複数のパイプ

私はAngular 2プロジェクトに取り組んでいます。

複数の列を持つテーブルがあります。すべての列には、ソートのための異なるロジックがあります（数値、string.lowercase、％のamountValueおよびINR）。行は、その列のソートロジックに基づいてソートされます。これを実現するために、引数がほとんどない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）が変更され、それに応じて行が並べ替えられます。用語を検索すると、結果がフィルターされ、目的の出力が表示されます。

しかし、（searchTermによって）フィルターされた結果を並べ替えようとしても、何も起こりません。この場合、2つのパイプが同時に機能していないと思います。これらのパイプを削除したくありません。

angularsortingpipes-filters
5
Anonym

うーん...非常に奇妙です。この助けかもしれません

<tr *ngFor="let row of (rows | sortTable: sortType : {'key': key, 'dt': dt}) | searchTableRow : searchTerm : ['name']">

そうでない場合は、各パイプでconsole.logを設定し、返されるものを監視してください

14
dimson d

パイプ記号を使用してパイプを適用できます。お気に入り

<div class="checkbox" *ngFor="let value of brand | filter: {name: searchbrand} | itemdisplayno: displayitems; let i = index">

ここでは2本のパイプを使用しています。 1つはパス値を持つcallesフィルター、2つ目はitemdisplaynoです。基本的に、最初にパス値でフィルターを適用してから、itemdisplaynoを実行します。

1
vishal dobariya

これは、最初にリストをソートしてからフィルタリングを適用するために発生しています。修正するには、htmlコードでパイプを並べ替える前にフィルターパイプを移動するだけです。

`<tr *ngFor="let row of (rows | searchTableRow : searchTerm : ['name']) | sortTable: sortType : {'key': key, 'dt': dt}">`
0
Ramin Ar