angular - Angular 2中同时存在多个管道

Question

我正在从事 Angular 2 项目。

我有一个包含多列的表格。每列都有不同的排序逻辑(数字、字符串、小写字母、以 % 和 INR 表示的 amountValue)。行根据该列的排序逻辑进行排序。为了实现这一点，我使用了一个名为 sortTable 的自定义管道，参数很少。

同时，顶部有一个输入框绑定(bind)了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)进行排序时，没有任何反应。我认为在这种情况下，两个管道不能同时工作。我不想删除任何这些管道。

Answer 1

嗯……很奇怪。可能是这个帮助

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

如果没有尝试在每个管道中设置 console.log 并观察它们返回的内容