Angular 2中同时存在多个管道答案

【问题标题】：Multiple pipes simultaneously in Angular 2Angular 2中同时存在多个管道
【发布时间】：2017-04-29 18:04:55
【问题描述】：

我正在开发一个 Angular 2 项目。

我有一个包含多列的表。每列都有不同的排序逻辑（数字、string.lowercase、amountValue in % 和 INR）。根据该列的排序逻辑对行进行排序。为了实现这一点，我使用了一个名为 sortTable 的自定义管道，它的参数很少。

同时，顶部有一个输入字段绑定到 searchTerm 变量。为了使用 searchTerm 过滤数据，我使用了另一个名为 sortTableRow 的自定义管道。

虽然很复杂，但是一个非常简化的sn-p可以是：

<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）时，什么也没有发生。我认为在这种情况下，两个管道不能同时工作。我不想移除任何这些管道。

【问题讨论】：

您是否尝试过先调用 sortTableRow 再调用 sortTable ？你的控制台有错误吗？一个 sn-p 在这里可以帮助你更快
是的！但没有用。控制台没有显示错误。
我不认为这种方法，使用管道进行排序是一个好主意。您应该在组件中注意这一点，而不是使用管道，我认为此设置将在每个检测周期进行过滤。过滤器应该只做一次，不要以这种方式设置。但如果你决定这样做，祝你好运。
使用纯管道，每次数据或过滤器参数发生变化时，过滤器函数只会被调用一次，不会更多。因为纯管道结果必须仅取决于它的参数。

标签： angular sorting pipes-filters

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

您可以使用管道符号应用管道。喜欢

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

我在这里使用两个管道。一种是通过值调用过滤器第二个是itemdisplayno。基本上首先应用具有通过值的过滤器，然后运行 itemdisplayno。

【讨论】：

【解决方案3】：

发生这种情况是因为您首先对列表进行排序，然后再应用过滤。要修复它，只需在 html 代码中对管道进行排序之前移动过滤管道。

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

【讨论】：