角质p表分页不起作用

问题描述

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

When populating the table array inside a the get() function, the paginator does not working. It only shows 1 of 1 page.

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

It works fine when the table array is populated inside ngInit(), showing 1 of 5 pages.

这很奇怪，看起来像个虫子吗?有任何想法吗?我的角度分量在下面.

This is very weird looks like a bug ? any ideas? My angular component is below.

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

这是单击获取"按钮后的结果

this is the result after clicking the get button

推荐答案

如果以这种方式更改源数组:

You have to call reset() on the TurboTable component if you change the source array this way, e.g.:

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

这篇关于角质p表分页不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！