angular primeng p-table 分页不起作用答案

【问题标题】：angular primeng p-table pagination not workingangular primeng p-table 分页不起作用
【发布时间】：2018-10-18 10:20:10
【问题描述】：

在get() 函数内填充表格数组时，分页器不起作用。它仅显示 1 页中的 1 页。

当表格数组填充在ngInit() 中时，它可以正常工作，显示 5 页中的 1 页。

这看起来很奇怪，像一个错误？有任何想法吗？我的角度分量在下面。

test.html

<div class="p-col-1">
  <button pButton type="button" label="GET" (click)="get()"></button>
</div>

<div class="p-grid">
  <div class="p-col">
    <p-table
      [value]="workingArr"
      [rows]="2"
      [paginator]="true"
      [responsive]="true"
      autoLayout="true"
    >
      <ng-template pTemplate="header">
        <tr>
          <th>testPaginator</th>
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-workingArr>
        <tr>
          <td>{{workingArr}}</td>
        </tr>
      </ng-template>
    </p-table>
  </div>
</div>

<div class="p-grid">
  <div class="p-col">
    <p-table
      [value]="notworkingArr"
      [rows]="2"
      [paginator]="true"
      [responsive]="true"
      autoLayout="true"
    >
      <ng-template pTemplate="header">
        <tr>
          <th>testPaginator</th>
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-notworkingArr>
        <tr>
          <td>{{notworkingArr}}</td>
        </tr>
      </ng-template>
    </p-table>
  </div>
</div>

test.ts

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-test",
  templateUrl: "./test.component.html",
  styleUrls: ["./test.component.css"]
})
export class TestComponent implements OnInit {
  workingArr: string[] = [];
  notworkingArr: string[] = [];

  constructor() {}

  ngOnInit() {
    for (let a = 0; a < 10; a++) {
      this.workingArr[a] = "test" + a;
      console.log("in init");
    }
  }

  get() {
    for (let b = 0; b < 10; b++) {
      this.notworkingArr[b] = "test" + b;
      console.log("in get");
    }
  }
}

这是点击get按钮后的结果

【问题讨论】：

标签： angular primeng primeng-turbotable

【解决方案1】：

如果您以这种方式更改源数组e.g.，则必须在TurboTable 组件上调用reset()：

<div class="p-col-1">
  <button
    pButton
    type="button"
    label="GET"
    (click)="get(); table.reset()"
  ></button>
</div>
...
<div class="p-grid">
  <div class="p-col">
    <p-table
      #table
      [value]="notworkingArr"
      [rows]="2"
      [paginator]="true"
      [responsive]="true"
      autoLayout="true"
    >
      <ng-template pTemplate="header">
        <tr>
          <th>testPaginator</th>
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-notworkingArr>
        <tr>
          <td>{{notworkingArr}}</td>
        </tr>
      </ng-template>
    </p-table>
  </div>
</div>

【讨论】：

谢谢！！有效！！你能向我解释为什么这是有效的吗？为什么我需要重置表？为什么这仅与分页有关？顺便说一句，如果我在 get() 函数中这样做 this.notworkingArr = [] - 它也可以工作，为什么？
@RMagen 分页器读取的表格组件的字段（first、totalRecords 等）在表格的value 输入字段的设置器中计算。但是更改数组不会触发 Angular 的更改检测，因此这些值永远不会更新。当您在OnInit 函数中填充数组时，数组会在被绑定到表之前填充。阅读更多here。
我在 p 表中使用了 ngIf。获取按钮#offer 无法识别它。当我删除 ngIf 它识别并工作。

【解决方案2】：

只需分配给一个临时数组，然后将其分配给 workingArr，而不是遍历它们。

【讨论】：