加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

Angular 2中同时存在多个管道

发布时间:2020-12-17 17:05:03 所属栏目:安全 来源:网络整理
导读:我正在开展一个Angular 2项目. 我有一个包含多列的表.每列都有不同的排序逻辑(number,string.lowercase,amountValue in%和INR).行根据该列的排序逻辑进行排序.为了实现这一点,我使用一个名为sortTable的自定义管道,其中包含很少的参数. 同时,顶部有一个输入
我正在开展一个Angular 2项目.

我有一个包含多列的表.每列都有不同的排序逻辑(number,string.lowercase,amountValue in%和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)在单击事件处理程序上发生更改,行会相应地进行排序.当我搜索一个术语时,结果被过滤,我看到了所需的输出.

但是当我尝试对FILTERED RESULTS(通过searchTerm)进行排序时,没有任何反应.我认为在这种情况下,两个管道不能同时工作.我不想删除任何这些管道.

解决方法

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

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

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读