ng2-bootstrap 分页和引导表集成错误答案

【问题标题】：ng2-bootstrap pagination and bootstrap table integration errorng2-bootstrap 分页和引导表集成错误
【发布时间】：2016-08-20 20:26:42
【问题描述】：

我正在尝试整合ng2-bootstrap pagination component 和引导表。

我有一个加载了 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>

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 只需点击last 按钮，然后点击cut data。

有什么建议吗？

【问题讨论】：

我无法让 [itemsPerPage] 正常工作。我设置了值并在持有我的 *ngFor 指令的 div 上关闭标记后直接调用它。您是否必须在表格中做任何事情来限制每页的项目？我将所有项目都放在一个页面上。
@Winnemucca itemPerPage 是分页指令的一个属性，它对表格没有影响。所以是的，你必须限制表数据。在上面的 plunker 中，它是由 onPageChange 函数完成的

标签： typescript pagination angular ng2-bootstrap

【解决方案1】：

作为一种解决方法，我决定稍微更改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 提到的类似问题）是在rows 更改之后手动触发组件的更改检测：

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();
}

【讨论】：