Angular 2中同时显示多个管道 [英] Multiple pipes simultaneously in Angular 2

问题描述

我正在从事Angular 2项目.

I am working on an Angular 2 project.

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

I have a table with multiple columns. Every column has different logic for sorting (number, string.lowercase, amountValue in % and INR). Rows are sorted on the basis of sorting logic of that column. To acheive this, I am using a custom pipe named sortTable with few arguments.

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

At the same time, there is an input field at the top that binds to searchTerm variable. To filter the data with searchTerm, I am using another custom pipe named sortTableRow.

尽管非常复杂，但可以简化为以下代码段:

Although it is very complicated, a very simplified snippet can be:

<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)在单击事件处理程序上被更改，并且行将进行相应的排序.当我搜索术语时，结果会被过滤，并且会看到所需的输出.

Both pipes work fine individually. When I click on column header, key and dt(dataType) gets changed on a click event handler and rows get sorted accordingly. When I search for a term, results get filtered and I see desired output.

但是，当我尝试对FILTERED RESULTS(排序结果)进行排序(按searchTerm)时，什么也没有发生.我认为在这种情况下，两个管道无法同时工作.我不想删除任何这些管道.

But when I try to sort the FILTERED RESULTS (by searchTerm), nothing happens. I think in this case, two pipes not working simultaneously. I don't want to remove any of these pipes.

推荐答案

hm ...非常奇怪.可能有帮助

hm... very strange. may be this help

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

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

if not try to set console.log in each pipe and watch what they return

这篇关于Angular 2中同时显示多个管道的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！