ES6數組中刪除指定元素

知識點：

ES6從數組中刪除指定元素

findIndex()方法返回數組中滿足提供的測試函數的第一個元素的索引。否則返回-1。

 arr.splice(arr.findIndex(item => item.id === data.id), 1)

 http://louiszhai.github.io/2017/04/28/array/

1:js中的splice方法

splice(index,len,[item]) 注釋：該方法會改變原始數組。

splice有3個參數，它也可以用來替換/刪除/添加數組內某一個或者幾個值

index:數組開始下標 len: 替換/刪除的長度 item:替換的值，刪除操作的話 item為空

如：arr = ['a','b','c','d']

刪除 ---- item不設置

arr.splice(1,1) //['a','c','d'] 刪除起始下標為1，長度為1的一個值，len設置的1，如果為0，則數組不變

arr.splice(1,2) //['a','d'] 刪除起始下標為1，長度為2的一個值，len設置的2

替換 ---- item為替換的值

arr.splice(1,1,'ttt') //['a','ttt','c','d'] 替換起始下標為1，長度為1的一個值為‘ttt’，len設置的1

arr.splice(1,2,'ttt') //['a','ttt','d'] 替換起始下標為1，長度為2的兩個值為‘ttt’，len設置的1

 

添加 ---- len設置為0，item為添加的值

arr.splice(1,0,'ttt') //['a','ttt','b','c','d'] 表示在下標為1處添加一項‘ttt’

 

 

 

想要的：定義一個數組ARR，保存已勾選上的數據ID，改變勾選框的狀態時從數組中刪除或添加數據ID，點擊批量刪除時，獲取數組ARR

操作：

1.頁面設置

// 全選
         <th nz-th nzCheckbox>
            <label nz-checkbox [(ngModel)]="_allChecked" [nzIndeterminate]="_indeterminate" (ngModelChange)="_checkAll($event)">
            </label>
          </th>


//單選

<td nz-td nzCheckbox>
     <label nz-checkbox [(ngModel)]="data.checked" (ngModelChange)="_refreshStatus($event)" (click)="onSelect(data)">
     </label>
 </td>

 

2.全選操作觸發事件

// 初始化全選和全部取消的狀態

  _allChecked = false; _indeterminate = false;

　　 _bacthDelete = [];//定義一個數組，存放勾選的數據ID

 // 點擊全選觸發的事件 _checkAll(value) { if (value) { this._displayData.forEach(data => { data.checked = true; this._bacthDelete.push(data.id); }, console.log(this._bacthDelete) ); } else { this._displayData.forEach(data => { data.checked = false; }, this._bacthDelete=[] ); console.log(this._bacthDelete) } this._refreshStatus(); }

 3.點擊單個數據狀態

  onSelect(data: FormData): void {
    this.selectedTestId = data;
    console.log(data);
    if(!data.checked){
      let arr = this._bacthDelete;
      arr.splice(arr.findIndex(item => item.id === data.id), 1)
      console.log(arr)
    }else{
      this._bacthDelete.push(data.id);
       console.log( this._bacthDelete)
    }

  }