Добавить и удалить значения внутри массива в случае изменения флажка - PullRequest
Новая
       27

Добавить и удалить значения внутри массива в случае изменения флажка

0 голосов
/ 26 ноября 2018

В моем угловом приложении я делаю флажок и фиксирую событие смены флажка и помещаю проверенное значение в массив.

Здесь, если мы снимаем флажок, объект obj также помещался в массив ..

Как удалить obj из массива, если снять отметку флажок ..

HTML: 

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

Ts: 

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 ]

0 голосов
/ 26 ноября 2018

Попробуйте следующий код:

Изменить в HTML: 

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

и в TS: 

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 методе здесь

0 голосов
/ 26 ноября 2018

Измените на (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

0 голосов
/ 26 ноября 2018

Передайте индекс вместе с объектом и удалите if из массива, если проверяемый статус имеет значение false; 

//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)">
...