4

ng2-bootstrap ページネーション コンポーネントとブートストラップ テーブルを統合しようとしています。

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=previewlastボタンを クリックしてからcut data.

何かアドバイス？

4

1 に答える 1

4

cutData回避策として、関数を少し変更することにしました。各データ カットの前に、現在のページが 1 にリセットされます。

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

これで、すべてが期待どおりに機能するようになりました。

別のオプション(同様の問題についてここで説明されているように) は、変更後にコンポーネントの変更検出を手動でトリガーする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();
}
于 2016-05-02T20:21:12.197 に答える