ng2-bootstrap 分页和 bootstrap 表集成错误

我正在尝试整合ng2-bootstrap 分页组件 http://valor-software.com/ng2-bootstrap/#pagination和引导表。

我有一个简单的引导表，加载了 ngFor 指令：

<tr>
    <th *ngFor="#col of cols">{{col.header}}
</tr>
</thead>
<tbody>
    <tr *ngFor="#row of rows">
        <td *ngFor="#col of cols">{{row[col.field]}}</td>
    </tr>
</tbody>

The rows内容由分页组件决定： 我有一个名为data其中包含表的一堆条目。数组长度用于确定totalItems分页组件的：

<pagination class="pagination-sm"
            [(ngModel)]="page"
            [totalItems]="data.length"
            [itemsPerPage]="itemsPerPage"
            [maxSize]="maxSize"
            [boundaryLinks]="true"
            (pageChanged)="onPageChange($event)">
</pagination>

桌子上的rows变量仅包含当前页面的条目。这是通过使用pageChange分页组件提供的事件：

onPageChange(page:any) {
        let start = (page.page - 1) * page.itemsPerPage;
        let end = page.itemsPerPage > -1 ? (start + page.itemsPerPage) : this.data.length;
        this.rows = this.data.slice(start, end);
    }

到目前为止，一切都很好... 问题是条目可以从data大批。 如果分页栏指向最后一页，则条目将从data数组，控制台中显示以下错误：

Expression 'rows in App@9:8' has changed after it was checked.

可以在这里找到一个实例：http://plnkr.co/edit/5zxamBiWISBpEmXYP5UK?p=preview http://plnkr.co/edit/5zxamBiWISBpEmXYP5UK?p=preview只需单击last按钮，然后cut data.

有什么建议吗？

作为解决方法，我决定更改cutData功能一点点。 每次数据切割前，当前页重置为1：

cutData(){
  this.page = 1;
  this.onPageChange({page: this.page, itemsPerPage: this.itemsPerPage})
  this.data = this.data.slice(0, this.data.length/2);
}

现在一切似乎都按预期进行。

另外一个选择（如上所述here https://github.com/angular/angular/issues/6005#issuecomment-195991516对于类似的问题）是在之后手动触发组件的更改检测rows change:

constructor(private cd: ChangeDetectorRef) {}

(...)

onPageChange(page:any) {
    let start = (page.page - 1) * page.itemsPerPage;
    let end = page.itemsPerPage > -1 ? (start + page.itemsPerPage) : this.data.length;
    this.rows = this.data.slice(start, end);
    this.cd.detectChanges();
}