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

Question

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

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

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

测试.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>

测试.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");
    }
  }
}

这是点击获取按钮后的结果

Answer 1

如果以这种方式更改源数组，则reset()必须调用组件，例如：TurboTable

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

Answer 2

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