ng2-bootstrapページングとブートストラップテーブルの統合エラー

Question

ng2-bootstrap pagination componentとブートストラップテーブルを統合しようとしています。

Iは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コンテンツをページ付けコンポーネントによって決定される。 Iは、テーブルのエントリの束を含ん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をクリックします。

アドバイスはありますか？

Answer 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変更した後、コンポーネントの変更検出をトリガーすることです：私が正しく動作するように[itemsPerPage]を得ることができなかった

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