Question

8月23日更新：迁移到PrimeNG Beta 13.仍有此问题。关于如何调试这个的任何建议？

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

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

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

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

对于前10张选票，数据列表按预期工作。当添加投票6时，数据列表正确地创建包含来自投票6的数据的新页面（＃2）。页面1包含5行，其中包含来自投票1-5的数据。

当添加投票7-10时，他们也正确地在第2页上创建新行。但是，当投票11添加到数组时，对应于投票11的数据被添加到数据列表的第2页的末尾。行 6 （！）和也作为第1行添加到新页面3。

提前感谢任何建议。

模板

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

第2页（在第11次投票之后，应该有5行！）

第3页（增加第11次投票后）

Answer 1

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

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

1 个答案: