选中所有复选框后取消选中复选框时删除一行

Question

我在 angular 的 table 中有一个复选框列。

当检查所有时，所有都被检查（工作正常）。

当取消选中所有时，所有都取消选中（这工作正常）。

如果选中一个，则选中特定的复选框，如果取消选中已选中的复选框，则取消选中。（工作正常）

但是我面临和问题，当我在选中所有复选框后尝试取消选中复选框时，该行被删除而不是取消选中复选框。即：this.holidays 在选中所有复选框后取消选中复选框时，数组也会更改。

为什么会出现这个问题？

这是我的习惯table

  <ngx-custom-table *ngIf="paginationLoad || selectedItems" 
    #table
      [value]="holidays"
      [selectedItems]="selectedItems"        
    >

 <ng-template  #header let-columns>
        <tr>
          <th >
             <nb-checkbox (checkedChange)="OnCheckBoxchangeAll(holidays)"></nb-checkbox>
          </th>
         // removed rest of the columns
        </tr>
      </ng-template>
      <ng-template #body  let-data>
        <tr>
          <td>
            <nb-checkbox (checkedChange)="OnCheckBoxchange(data ,$event)" [checked]="selectedItems.indexOf(data) >=0" ></nb-checkbox>
          </td>
 // removed rest of the columns
 </tr>
      </ng-template>
    </ngx-custom-table>

  OnCheckBoxchange(data, isChecked: boolean){
    console.log(data);

    if(isChecked === true){
      this.selectedItems.push(data);
    }
    else{
      this.selectedItems.splice(this.selectedItems.findIndex(x => x.id === data.id) , 1);
    }  
    console.log("this.selectedItems" , this.selectedItems);
    console.log("this.holidays" , this.holidays); 
// here the data is removed from this.holidays too. Why? 
  }

  OnCheckBoxchangeAll(data){
    this.checkedAll = !this.checkedAll;

    if(this.checkedAll === true) {
      this.selectedItems = data;
    }
    else {
      this.selectedItems = [];
    }
}

this.holidays 取自 API

Answer 1

在OnCheckBoxchangeAll(data)中需要修改如下：

if (this.checkedAll === true) {
  this.selectedItems = [...data];
}

所以这2个数组并不指向相同的内存地址，而是作为2个独立的数组进行管理。

否则，如下：

this.selectedItems.splice(this.selectedItems.findIndex(x => x.id === data.id) , 1);

也会导致原始 data 发生变化。

选中所有复选框后取消选中复选框时删除一行

A row is removed when uncheck a checkbox after checked all the check boxes

data-binding

checkbox

checked

array-splice

angular