1

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

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

see image here

Binary Alchemist
  • 1,600
  • 1
  • 13
  • 28
RMagen
  • 612
  • 2
  • 9
  • 23

2 Answers2

4

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>
Binary Alchemist
  • 1,600
  • 1
  • 13
  • 28
sloth
  • 99,095
  • 21
  • 171
  • 219
  • thank you !! it worked !! can you please explain to me why this is working ? why do i need to reset the table ? why this is relevant just to the pagination ? by the way if i do this this.notworkingArr = [] in the get() function - it is also working any idea why ? – RMagen Oct 18 '18 at 12:02
  • 3
    @RMagen The fields of the table component that the paginator reads (`first`, `totalRecords`, etc...) are computed in the setter of the table's `value` input field. But changing an array does not trigger Angular's change detection, so the values are never updated. When you fill the array in the `OnInit` function, the array is filled *before* it's bound to the table. Read more [here](https://stackoverflow.com/questions/42962394/angular-2-how-to-detect-changes-in-an-array-input-property). – sloth Oct 18 '18 at 13:00
  • I used ngIf in the p-table. The Get button #offer did not recognize it. When I deleted ngIf it recognized and worked. – Kübra Nov 27 '19 at 14:24
0

just assign to a temporary array then assign that to the workingArr, instead of iterating through them.

naol arega
  • 11
  • 1