创建第 3 页时，PrimeNG DataList 分页中断

Question

8 月 23 日更新：迁移到 PrimeNG Beta 13。仍然有这个问题。关于如何调试这个有什么建议吗？

8 月 15 日更新：刚刚将我的项目迁移到 Angular2 RC5。数据列表问题依旧

我在使用 datalist 分页时遇到了一个奇怪的问题（使用 PrimeNG Beta 12，但在 Beta 11 中遇到了同样的问题）。问题很可能出现在我的代码中，因为我在其他地方使用数据列表没有任何问题。

我的组件（页面）包含一个按钮和一个数据列表。数据列表底部有一个分页器，数据列表的 rows 属性设置为 5.

datalist 的数据源是一个名为 votes 的对象数组（较大对象的一部分）。最初，投票数组是空的。该按钮打开一个包含简单表单的 PrimeNG 对话框。提交表单后，将创建一个新的投票对象并将其推送到 votes 数组中。

对于前 10 个投票，数据列表按预期工作。添加投票 6 后，数据列表会正确创建新页面 (#2)，其中包含来自投票 6 的数据。页面 1 包含 5 行，其中包含来自投票 1-5 的数据。

添加第 7-10 票时，它们还在第 2 页上正确地创建了新行。但是，当将第 11 票添加到数组时，与第 11 票相对应的数据被添加到第 2 页的末尾数据列表作为行 6(!) and 也到新的第 3 页作为行 1.

提前感谢您的任何建议。

Template

<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>

Component

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

Page 2 (after 11th vote added, should have 5 rows!)

Page 3 (after 11th vote added)

Answer 1

问题是由模板第一行的拼写错误引起的。 rows="5" 应该是 [rows]="5"。

创建第 3 页时，PrimeNG DataList 分页中断

PrimeNG DataList pagination breaks when page 3 is created

pagination

datalist

typescript

primeng

angular