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