为什么p-分页与p-table不工作

Question

我正在实现p-分页，p-table中的数据应该相应地反映出来。如果我在pagination=中使用p-table中的“true”，它就能工作，但是我想要实现的是使用paginationModule。在这种情况下，根据分页中的页面选择显示数据。请帮帮我。

<p-dialog 
  [(visible)]="mSerivce.isAuditDialogVisible"
  [draggable]="false"
  [closable]="true"
  showEffect="fade"
  [contentStyle]="{width:'800px', height:'400px'}" >
  <p-header>
    Audit History
  </p-header>
  <p-table [value]="auditHistoryList" [columns]="auditGridColumns" [responsive]="true">
    <ng-template pTemplate="colgroup" let-columns>
      <colgroup>
        <col *ngFor="let col of columns" [style.width]="col.style" />
      </colgroup>
    </ng-template>
    <ng-template pTemplate="header" let-columns>
      <tr class="st-sub-header">
        <th *ngFor="let col of columns">
          {{col.header}}
        </th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" class="tb-body" let-rowIndex="rowIndex" let-rowData let-expanded="expanded" let-columns="columns">
      <tr>
        <td class="h-90 mh-20">{{rowData.action || '-'}}</td>
        <td class="h-90">{{rowData.user}}</td>
        <td class="h-90">{{rowData.createdDate || '-'}}</td>
        <td class="h-90" [innerHTML]="rowData?.comments || '-'"></td>
      </tr>
    </ng-template>
    <ng-template pTemplate="emptymessage" let-columns>
      <tr>
        <td colspan="4">
          No records found
        </td>
      </tr>
    </ng-template>
  </p-table>
  <p-footer>
    <p-paginator [rows]="2" [totalRecords]="auditHistoryList.length" pageLinkSize="3"></p-paginator>
  </p-footer>
</p-dialog>

Answer 1

我也有过类似的问题。但是，我能看到的代码和我的代码之间唯一的区别是您如何使用分页器。也许你可以试着用这样的方式改变它：

<p-table #myTable [value]="auditHistoryList" [paginator]="true" [rows]="2">
...

在.ts中，在添加新行的情况下，可以这样更新totalRecords：

this.auditHistoryList.push(auditHistory);
this.myTable.totalRecords = this.auditHistoryList.value.length;

myTable是p-table组件的ViewChild：

import { Table } from 'primeng/table';
...
@ViewChild(Table, {static: false}) myTable : Table;

我希望这会有所帮助。