代码之家 › 专栏 › 技术社区 › Maniraj Murugan

在复选框的更改事件中添加和删除数组中的值

angular6 checkbox typescript angular javascript

Maniraj Murugan · 技术社区 · 6 年前

在这里,如果我们取消选中复选框,obj也会被推送到数组中。。

如何这个从数组if 取消勾选 复选框。。

<div *ngFor="let item of order; let i = index">
  <input type="checkbox" [id]="item+i" [name]="item"[(ngModel)]="item.Checked" (change)="getCheckboxValues(item)">
   <label [for]="item+i"> {{item}} </label>
</div>

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  order = ['One','Two','Three','Four'];

  newArray : any = [];

  //Checkbox Change detecting function
  getCheckboxValues(data) {
    let obj = {
      "order" : data
    }

   // Pushing the object into array
    this.newArray.push(obj);

    //Duplicates the obj if we uncheck it
    //How to remove the value from array if we uncheck it
    console.log(this.newArray);
  }

}

我用上面的链接解决了这个问题 https://stackblitz.com/edit/angular-9pt9sn

请帮助我删除“`newArray``中未检查的值。。

3 回复 | 直到 6 年前

Joy Biswas 6 年前

改为 (ngModelChange)="getCheckboxValues($event,item)"

以及根据复选框的选中和取消选中来添加(如果不存在)和删除(如果元素存在)的函数

  //Checkbox Change detecting function
  getCheckboxValues(ev, data) {
    let obj = {
      "order" : data
    }

    if(ev.target.checked){
      // Pushing the object into array
      this.newArray.push(obj);

    }else {
      let removeIndex = this.newArray.findIndex(itm => itm.order===data);

      if(removeIndex !== -1)
        this.newArray.splice(removeIndex,1);
    }

    //Duplicates the obj if we uncheck it
    //How to remove the value from array if we uncheck it
    console.log(this.newArray);
  }

链接 https://stackblitz.com/edit/angular-5jamcr

Sachila Ranawaka 6 年前

将索引与对象一起传递,如果检查状态为false,则从数组中移除if;

//Checkbox Change detecting function
 getCheckboxValues(data, index) {
    let obj = {
      "order" : data
    }

    if(!data.Checked){
       this.newArray.splice(index, 1);
    }
    else{

      // Pushing the object into array
      this.newArray.push(obj);
    }


       //Duplicates the obj if we uncheck it
       //How to remove the value from array if we uncheck it
        console.log(this.newArray);
}

<input type="checkbox" [id]="item+i" [name]="item"[(ngModel)]="item.Checked" (change)="getCheckboxValues(item, i)">

Prashant Pimpale Dila Gurung 6 年前

(ngModelChange)="getCheckboxValues($event,item)"  // use ndModelChange event

getCheckboxValues(event, data) {

    // use findIndex method to find the index of checked or unchecked item
    var index = this.newArray.findIndex(x => x.order==data);

    // If checked then push 
    if (event) {
       let obj = {
        "order": data
    }
      // Pushing the object into array
      this.newArray.push(obj);
    }
    else {
      this.newArray.splice(index, 1);
    }
    //Duplicates the obj if we uncheck it
    //How to remove the value from array if we uncheck it
    console.log(this.newArray);
  }
}

工作 StackBlitz

你可以读到 findIndex indexOf 方法 here