点击PrimeNG p表中的取消按钮后如何保留复选框的选择?

Question

我使用以下代码显示带有 Ok 和取消按钮的对话框，同时取消选择 PrimeNG p 表中的复选框。如果有人试图取消取消选择复选框，那么我需要保留复选框的选择。

<p-table [value]="data" [scrollable]="true" scrollHeight="400px" frozenWidth="450px"
dataKey="id" [(selection)]="chkBoxSelectedFARow" editMode="row" 
[first]="first" [totalRecords]="totalRecordsCount" [rows]="20" selectionMode="multiple"
[lazy]="true" (onPage)="loadpaginator($event)"
autoLayout="true" sortMode="single" (onRowSelect)="onRowEditSelect($event)" (onHeaderCheckboxToggle)="rowChangeGrid($event)"
[customSort]="true" (onRowUnselect)="onRowEditUnselect($event)">
<ng-template pTemplate="header">
<tr>
<th><p-tableHeaderCheckbox></p-tableHeaderCheckbox></th>
<th>Id</th>
<th>Number</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-data let-rowIndex="rowIndex">
<tr [pSelectableRow]="data" [pSelectableRowIndex]="rowIndex">
<td><p-tableCheckbox #chkRowData [value]="data" [index]="rowIndex"></p-tableCheckbox></td>
<td>{{data.id}}</td>
<td>{{data.number}}</td>
</tr>
</ng-template>
</p-table>

单击对话框中的取消按钮后如何保留复选框的选择？

堆栈闪电战演示

Answer 1

每次取消选择一行时，将其id存储在缓冲区变量中。然后，当您取消操作时，只需将相应的对象放回您的选择即可。

onRowEditUnselect($event) {
this.lastUnselectedCheckbox = $event.data.id; // stock last unchecked item
this.unCheckDisplayDialog = true;
}

cancelRow() {
let checkboxToAdd = this.data.filter(
item => item.id === this.lastUnselectedCheckbox
)[0]; // search corresponding object
checkboxToAdd.status = true;
this.selection.push(checkboxToAdd); // put it back to selection
this.selection = [...this.selection];
this.unCheckDisplayDialog = false;
}

见斯塔克闪电战