ページ3の作成時にPrimeNG DataListのページ区切りが壊れます

8月23日更新：PrimeNG Beta 13に移行されました。これをデバッグする方法に関するアドバイスはありますか？ページ3の作成時にPrimeNG DataListのページ区切りが壊れます

8月15日更新：プロジェクトをAngular2 RC5に移行しました。データリストの問題は依然として存在します。

datalistページネーション（PrimeNG Beta 12を使用していましたが、Beta 11で同じ問題がありました）で奇妙な問題が発生しました。この問題は、問題のないデータ・リストをどこか別の場所で使用しているので、私のコードではおそらくそうです。

私のコンポーネント（ページ）には、ボタンとデータリストがそれぞれ1つずつあります。データリストには下部に1つのページネクタがあり、データリストのrows属性はに設定されています。

データリストのデータソースは、votes（大きなオブジェクトの一部）と呼ばれるオブジェクトの配列です。最初は、投票配列は空です。このボタンは、簡単なフォームを含むPrimeNGダイアログを開きます。フォームを提出すると、新しい投票オブジェクトが作成され、投票配列にプッシュされます。

最初の10票の場合、データリストは期待どおりに機能します。投票6が追加されると、データリストは、投票6のデータを含む新しいページ（＃2）を正しく作成します。ページ1は、投票1-5のデータを含む5つの行を含んでいます。

投票7-10が追加されると、ページ2にも新しい行が正しく作成されます。ただし、投票11が追加されると、投票11に対応するデータがページ2の最後に追加されます。任意の提案を事前に行としてデータリスト（！）と行として新しいページ3にも 1.

感謝。

テンプレート

<p-dataList [value]="providerData.reportCards[providerData.selectedReportCardIndex]?.votes" [paginator]="true" rows="5" [responsive]="true"> 
     <header> 
     <div> 
      <h1> 
      {{providerData?.reportCards[providerData?.selectedReportCardIndex]?.reportCardYear}} {{providerData.reportCards[providerData.selectedReportCardIndex].reportCardDataSource.reportCardSourceName}} 
      </h1> 
      <h2>Congressional Votes ({{providerData.reportCards[providerData.selectedReportCardIndex]?.votes?.length}})</h2> 
     </div> 
     <button type="button" pButton icon="fa-plus" (click)="onAddVoteButtonClicked()" label="Add" title="Add vote"></button> 
     </header> 
     <template let-vote> 
     <div class="ui-grid ui-grid-responsive ui-fluid" style="padding:20px;border-bottom:1px solid #D5D5D5;"> 
      <div class="ui-grid-row"> 
      <div class="ui-grid-col-2"> 
       <i class="fa fa-pencil" (click)="onEditVoteButtonClick(vote)" style="cursor:pointer;" title="Edit vote"></i> 
      </div> 
      <div class="ui-grid-col-2" style="text-align: center"> 
       <span title="chamber">{{vote.chamber | legislativeBodyToStringPipe}}</span> 
      </div> 
      <div class="ui-grid-col-2" style="text-align: center"> 
       <span title="roll cal number">{{vote.rollCallNumber}}</span> 
      </div> 
      <div class="ui-grid-col-4" style="text-align: center"> 
       <span title="preferred action/action weight">{{vote.preferredAction | voteActionToStringPipe}}/{{vote.actionWeight | actionWeightToStringPipe}}</span> 
      </div> 
      <div class="ui-grid-col-2"> 
       <i class="fa fa-trash" (click)="onDeleteVoteButtonClick(vote)" style="cursor:pointer;" title="Delete vote"></i> 
      </div> 
      </div> 
     </div> 
     </template> 
    </p-dataList> 

    <p-dialog header="Add Vote" [(visible)]="displayAddVoteDialog" [responsive]="true" showEffect="fade" [modal]="true" width="400"> 
     <create-vote-form [reportCardYear]="providerData.reportCards[providerData.selectedReportCardIndex].reportCardYear" [reportCardName]="providerData.reportCards[providerData.selectedReportCardIndex].reportCardDataSource.reportCardSourceName" 
     [voteCount]="providerData.reportCards[providerData.selectedReportCardIndex].votes.length" [voteWeightOptions]="voteWeightItems" 
     [preferredVotePositionOptions]="preferredPositionItems" [chamberOptions]="chamberItems" (voteCreated)=onVoteCreated($event) 
     (formCancelled)=onCreateVoteFormCancelled() [errorMessages]="createVoteError"></create-vote-form> 
    </p-dialog> 

    <p-dialog header="Confirm Deletion" [(visible)]="displayVoteDeleteConfirmation" modal="modal" showEffect="fade"> 
     <p> 
     Delete the following vote and all related data (<strong>NO undo</strong>)? 
     </p> 
     <p> 
     <strong>{{providerData?.reportCards[providerData.selectedReportCardIndex]?.votes[selectedVoteIndex]?.chamber | legislativeBodyToStringPipe}}</strong><br/> 
     <strong>{{providerData?.reportCards[providerData.selectedReportCardIndex]?.votes[selectedVoteIndex]?.rollCallNumber}}</strong> 
     </p> 
     <footer> 
     <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"> 
      <button type="button" pButton icon="fa-close" (click)="onVoteDeleteConfirmButtonClick(false)" label="No"></button> 
      <button type="button" pButton icon="fa-check" (click)="onVoteDeleteConfirmButtonClick(true)" label="Yes"></button> 
     </div> 
     </footer> 
    </p-dialog>

コンポーネント

import { Component, OnInit } from '@angular/core'; 
import { Button, SelectItem, Message, Dialog, DataList, Column, Header, Footer } from 'primeng/primeng'; 

import {ProviderData, DataService, ReportCardVote, 
    ActionWeightToStringPipe, LegislativeBodyToStringPipe, VoteActionToStringPipe, 
    DUPLICATE_REPORT_CARD_VOTE_MESSAGE} from '../shared/index'; 
import {CreateVoteFormComponent} from './create-vote-form.component'; 

@Component({ 
    moduleId: module.id, 
    selector: 'vote-data-entry', 
    templateUrl: 'vote-data-entry.component.html', 
    directives: [Button, DataList, Header, Footer, Column, Dialog, CreateVoteFormComponent], 
    pipes: [ActionWeightToStringPipe, LegislativeBodyToStringPipe, VoteActionToStringPipe,] 
}) 
export class VoteDataEntryComponent implements OnInit { 

    public createVoteError: Message[] = []; 
    private chamberItems: SelectItem[]; 
    private preferredPositionItems: SelectItem[]; 
    private voteWeightItems: SelectItem[]; 
    private providerData: ProviderData = new ProviderData(); 
    private displayAddVoteDialog: boolean = false; 
    private selectedVoteIndex: number = -1; 
    private displayVoteDeleteConfirmation: boolean = false; 

    constructor(private dataService: DataService) { } 

    // Returns the index of the report card vote in the selected reportCard that has the same chamber 
    // and rollCallNumber, or -1 if there is no match. 
    indexOf(selectedVote: ReportCardVote): number { 
     return this.providerData.reportCards[this.providerData.selectedReportCardIndex].votes.findIndex(x => 
      x.chamber === selectedVote.chamber && x.rollCallNumber === selectedVote.rollCallNumber); 
    } 

    ngOnInit() { 
     this.chamberItems = this.dataService.getChamberItems(); 
     this.preferredPositionItems = this.dataService.getpPreferredPositionItems(); 
     this.providerData = this.dataService.getProviderData(); 
     this.voteWeightItems = this.dataService.getActionWeightItems(); 
    } 

    onAddVoteButtonClicked() { 
     this.createVoteError = []; 
     this.displayAddVoteDialog = true; 
    } 

    onCreateVoteFormCancelled() { 
     this.displayAddVoteDialog = false; 
    } 

    onDeleteVoteButtonClick(vote: ReportCardVote) { 
     this.selectedVoteIndex = this.indexOf(vote); 
     this.displayVoteDeleteConfirmation = true; 
    } 

    onVoteDeleteConfirmButtonClick(isDeleteOk: boolean) { 
     if (isDeleteOk) { 
      this.providerData.reportCards[this.providerData.selectedReportCardIndex].votes.splice(this.selectedVoteIndex, 1); 

      // store updated reportCards in local storage 
      this.dataService.storeProviderData(this.providerData); 
     } 
     this.displayVoteDeleteConfirmation = false; 
    } 

    onVoteCreated(newVote: ReportCardVote) { 
     if (newVote) { 
      if (this.indexOf(newVote) === -1) { 
       this.providerData.reportCards[this.providerData.selectedReportCardIndex].votes.push(newVote); 

       // store updated reportCards in local storage 
       this.dataService.storeProviderData(this.providerData); 
      } else { 
       // duplicate vote 
       this.createVoteError = []; 
       this.createVoteError.push(DUPLICATE_REPORT_CARD_VOTE_MESSAGE); 
      } 
     } 
    } 
}