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)
    }

  }

 

转载于:https://www.cnblogs.com/linsx/p/8331623.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值