primeNG中的表刷新问题

Question

我在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);
}

Answer 1

根据PrimeNg文档

在某些情况下（例如重新应用排序），表可能需要了解其值的变化。为了提高性能，只有在值的引用发生更改时才执行此操作，这意味着使用设置器代替ngDoCheck / IterableDiffers会降低性能。因此，当您操作诸如删除或添加项目之类的值时，不要使用诸如push之类的数组方法，而是使用散布运算符或类似方法创建新的数组引用。

removeRow(indx) {    
  this.filteredInv.splice(indx, 1);
  this.filteredInv= [...this.filteredInv];
}