Question

我想要实现的是根据用户的选择对数组users进行排序，并将结果拆分为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输出输入表的一部分，sort根据给定的参数对其进行排序。这两个管道都是由我编写的，并按预期单独工作。

该组件更改了绑定到表头单元格上的单击的函数中的变量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

Answer 1

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

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

返回一个新数组。
- 这是针对此特定用例的正确解决方案。 sort的输出每次都应该是一个明显不同的数组，因此每次更改数组ref都是有意义的，并将更改传达给Angular2变化检测。
将管道标记为非纯净。
- 这将导致paginate每次更改检测轮次运行，即每次击键或鼠标移动。可能是可以接受的，但需要比上述更多的处理器周期。
在sort / paginate上手动触发更改检测。

如何在Angular 2

1 个答案: