[英]angular primeng p-table pagination not working
When populating the table array inside a the get()
function, the paginator does not working.在
get()
函数内填充表数组时,分页器不起作用。 It only shows 1 of 1 page.它只显示 1 页中的 1 页。
It works fine when the table array is populated inside ngInit()
, showing 1 of 5 pages.当表数组填充在
ngInit()
,它工作正常,显示 5 页中的 1 页。
This is very weird looks like a bug ?这看起来很奇怪像个bug? any ideas?
有任何想法吗? My angular component is below.
我的角度分量在下面。
test.html测试.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, eg :如果以这种方式更改源数组,则必须在
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>
只需分配给一个临时数组,然后将其分配给workingArr,而不是遍历它们。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.