删除行后无法刷新 p-table 中的数据 (PrimeNg)
Can't refresh data in p-table after deleting row ( PrimeNg )
I m using primeng 8.1 with angular 8
I refer my p-table with #dt then i call dt.reset() and getcandidates() to refresh
But it shows first page of p-table without refreshing list i searched in official
documentation but
i don't find a solution so the only way to refresh data is to reload entire navigator page
<p-table #dt
[paginator]="true"
[columns] = "cols"
[value]="listcandidats"
[totalRecords]="listcandidats.length"
[paginator]="true"
[rows]="5"
[style.top.px]="screenHeight/6"
>
<ng-template pTemplate="caption">
<div style="text-align: right">
<i class="fa fa-search" style="margin:4px 4px 0 0"></i>
<input type="text" pInputText size="50" placeholder="Recherche multioption"
(input)="dt.filterGlobal($event.target.value, 'contains')" style="width:auto">
</div>
</ng-template>
<ng-template pTemplate="header" let-columns>
<tr>
<th>Candidat</th>
<th>Action</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData >
<tr [pSelectableRow]="rowData" >
<td [style.width.px]="screenWidth/8"> <h3>{{rowData.nom}}</h3></td>
<td>
<button pButton type="button" label="modifier" (click)="showDialog(rowData.id)" class="ui-
button-rounded ui-button-warning">
</button>
<button pButton type="button" label="supprimer"
(click)="deletecandidat(rowData.id);dt.reset();getcandidats()" class="ui-button-rounded ui-
button-danger"></button>
</td>
</tr>
<hr [style.width.px]="screenWidth">
</ng-template>
</p-table>
As per PrimeNg Document
Table 在某些情况下可能需要注意其值的变化,例如重新应用排序。出于性能考虑,仅当值的引用发生变化时才会这样做,这意味着使用 setter 而不是 ngDoCheck/IterableDiffers
,这会降低性能。因此,当您操作值(例如删除或添加项目)时,不要使用 array
方法,例如 push
,splice
使用展开运算符或类似方法创建新的数组引用。
I m using primeng 8.1 with angular 8
I refer my p-table with #dt then i call dt.reset() and getcandidates() to refresh
But it shows first page of p-table without refreshing list i searched in official documentation but i don't find a solution so the only way to refresh data is to reload entire navigator page
<p-table #dt
[paginator]="true"
[columns] = "cols"
[value]="listcandidats"
[totalRecords]="listcandidats.length"
[paginator]="true"
[rows]="5"
[style.top.px]="screenHeight/6"
>
<ng-template pTemplate="caption">
<div style="text-align: right">
<i class="fa fa-search" style="margin:4px 4px 0 0"></i>
<input type="text" pInputText size="50" placeholder="Recherche multioption"
(input)="dt.filterGlobal($event.target.value, 'contains')" style="width:auto">
</div>
</ng-template>
<ng-template pTemplate="header" let-columns>
<tr>
<th>Candidat</th>
<th>Action</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData >
<tr [pSelectableRow]="rowData" >
<td [style.width.px]="screenWidth/8"> <h3>{{rowData.nom}}</h3></td>
<td>
<button pButton type="button" label="modifier" (click)="showDialog(rowData.id)" class="ui-
button-rounded ui-button-warning">
</button>
<button pButton type="button" label="supprimer"
(click)="deletecandidat(rowData.id);dt.reset();getcandidats()" class="ui-button-rounded ui-
button-danger"></button>
</td>
</tr>
<hr [style.width.px]="screenWidth">
</ng-template>
</p-table>
As per PrimeNg Document
Table 在某些情况下可能需要注意其值的变化,例如重新应用排序。出于性能考虑,仅当值的引用发生变化时才会这样做,这意味着使用 setter 而不是 ngDoCheck/IterableDiffers
,这会降低性能。因此,当您操作值(例如删除或添加项目)时,不要使用 array
方法,例如 push
,splice
使用展开运算符或类似方法创建新的数组引用。