Function that adds/removes element of the array by clicking checkbox at the angle

Question

I have a checkbox that when clicked I should add/remove this element depending on the action.

I tried something like:

  adicionaProdutoSelecionado(produto,event){

    if (event.target.checked === true) {
      this.produtosSelecionados.push(produto);
    }
    if (event.target.checked === false) {
      this.produtosSelecionados = this.produtosSelecionados.filter((produto) => produto !== produto);
    }
  }

When I perform uncheck my productsSelected is empty, I should remove the element that was clicked, only.

Where am I going wrong?

This is my template:

<tr *ngFor="let produto of sortedDataProduto; let i = index">
  <td>
    <div class="custom-control custom-checkbox">
      <input (click)="adicionaProdutoSelecionado(produto, $event)" type="checkbox" class="custom-control-input" id="defaultUnchecked{{i}}">
      <label class="custom-control-label" for="defaultUnchecked{{i}}"></label>
    </div>
  </td>
</tr>

Answer 1

adicionaProdutoSelecionado(produto,event){

    if (event.target.checked === true) {
      this.produtosSelecionados.push(produto);
    }
    if (event.target.checked === false) {
      var index = this.produtosSelecionados.findIndex(produto);
      this.produtosSelecionados.Splice(index,1);
    }
  }

I think it will now work because it is necessary to take the index in which your product is to then remove it from the array.

Answer 2

front html

 <input (click)="adicionaProdutoSelecionado(produto, $event.target.checked, i)" type="checkbox" class="custom-control-input" id="defaultUnchecked{{i}}">

back ts

  adicionaProdutoSelecionado(produto,event,i){

    if (event) {
      this.produtosSelecionados.push(produto);
    }else
      this.produtosSelecionados.filter(item => item.id != produto[i].id);
    }
  }

removes the item by searching for some element of the array, you can exchange the "ID", for any information you want

Answer 3

First, if a variable is boolean just put it in your if, there is no need for an explicit comparison. Second, avoid comparing whole objects as in produto !== produto, use your Ids or some other attribute, and try not to use the same name for local and global variables.

  adicionaProdutoSelecionado(produto, event){

    if (event.target.checked) {
      this.produtosSelecionados.push(produto);
    } else {
      this.produtosSelecionados = this.produtosSelecionados.filter(item => item.id !== produto.id);
    }
  }