如何在Angular 2中运行多个链式变量依赖管道

2019年7月21日 189次阅读

我想要实现的是根据用户的选择对数组用户进行排序,并将结果拆分为20的可导航页面.

我的模板有一个看起来像这样的表

<table>
   <thead>...</thead>
   <tbody>
            <tr
                *ngFor="let theUser of users | sort: [ sortField, sortAscending ] | paginate: [ pageNumber-1, pageSize ] ">
                <td>{{theUser.id}}</td>
                <td>{{theUser.attribute0}}</td>
                <td>{{theUser.attribute1}}</td>
                <td>{{theUser.attribute2}}</td>
            </tr>
        </tbody>
    </table>

paginate输出输入表的一部分,根据给定的参数对其进行排序.两个管道都是由我编写的,并按预期单独工作.

该组件更改了绑定到表头单元格上的单击的函数中的变量sortField和sortAscending,这些单元格根据单击的单元格调用此函数：

   sortUsers(field:string): void{
    if(this.sortField==field){
      this.sortAscending=!this.sortAscending;
    }else{
      this.sortAscending=true;
      this.sortField=field;
    }
    this.detector.detectChanges();
  }

其中detector是一个注入的ChangeDetectorRef实例.
此外,pageNumber与[(ngModel)]绑定到微调器.

我的问题是,当我单击表头单元格时,我的管道日志输出表明只调用了第一个管道,当我更改微调器的值时,只调用第二个管道.我期待的行为是两个管道都被调用.

编辑：我通过递增pageNumber,调用detectChanges然后递减它并再次调用detectChanges来解决这个特殊情况.我还是想知道如何解决一般情况.

EDIT2：Plunker here,相关bug report here

最佳答案 正如错误报告中指出的那样,问题是我的排序正在输出对原始数组的引用.由于引用没有改变,因此更改检测将输出解释为未更改.

GitHub的用户vicb提供了以下解决方案：

>返回一个新数组.

>这是针对此特定用例的正确解决方案. sort的输出每次应该是一个明显不同的数组,因此每次更改数组ref都是有意义的,并将更改传达给Angular2变化检测.

>将管道标记为非纯净.

>这将导致每个变化检测轮次运行分页,即每次击键或鼠标移动.可能是可以接受的,但需要比上述更多的处理器周期.

>在sort / paginate上手动触发更改检测.

点赞