我在PrimeNG中使用p-dataTable
显示数据。我有一个要求,用户可以删除任何行数据。
我添加了一个删除逻辑但删除表后没有刷新。
另外,我希望在删除后保留相同的页码
这是我的示例代码:
<p-dataTable [value]="filteredInv" scrollable="true" scrollHeight="calc(100vh - 300px)" [rows]="list" [paginator]="true"
responsive="true" sortField="sku" sortOrder="1" [resizableColumns]="false" class="custom-pagi"
[hidden]="inCall" [(first)]="pageNo" (onPage)="changePage($event)" (onPageChange)="paginate($event)" [rowTrackBy]="rowTrackBy">
<p-column title="sku" field="sku" header="SKU" [style]="{'width':'120px'}" styleClass="sku-header border-column text-center" sortable="true"></p-column>
<p-column title="name" field="name" header="Item Name" styleClass="no-border-column-removed text-left"></p-column>
<p-column title="max" field="max" header="Quantity" styleClass="no-border-column-removed text-left"></p-column>
<p-column title="updatedAt" field="updatedAt" header="Date" styleClass="no-border-column-removed text-left">
<ng-template let-ri="rowIndex" let-rowdata="rowData" pTemplate="body">
{{(rowdata.updatedAt) | date:'MM/dd/yyyy' }}
</ng-template>
</p-column>
<p-column header="Actions" [style]="{'width': '150px'}" styleClass="no-border-column-removed text-left">
<ng-template let-ri="rowIndex" let-rowdata="rowData" pTemplate="body">
<md-icon class="fl cursor" (click)="editInventory(rowdata, ri)">mode_edit</md-icon>
<md-icon class="fl cursor" (click)="deleteSKU(rowdata, ri)" style="margin-left:8px;">delete</md-icon>
</ng-template>
</p-column>
</p-dataTable>
这是我的deleteSKU()逻辑
deleteSKU(data, ind) {
let dialogRef = this.dialog.open(DeletedialogComponent, {
data: {
message : data.sku
}
});
dialogRef.afterClosed().subscribe(result => {
if (result && data.id) {
let indx = this.filteredInv.indexOf(data)
this.http.removeInven(data.id).subscribe(res => this.removeRow(indx))
}
});
}
removeRow(indx) {
this.filteredInv.splice(indx, 1);
}
根据PrimeNg文件
在某些情况下,表可能需要了解其值的变化,例如重新应用排序。为了提高性能,仅在值的引用更改意味着使用setter而不是ngDoCheck / IterableDiffers时才会执行此操作,这会降低性能。因此,当您操作值(例如删除或添加项)时,不使用诸如push之类的数组方法,splice将使用扩展运算符或类似方法创建新的数组引用。
removeRow(indx) {
this.filteredInv.splice(indx, 1);
this.filteredInv= [...this.filteredInv];
}