如何在选中或未选中复选框时从数组中推送和删除项目？

Question

when clicking on a checkbox and event.target.checked === true, in the following table, I am pushing the headerName and cell into an array, but I am unable to remove the item when event.target.checked === false, since I don't have the index of the added item. Any clue to solve this will be appreciated.

https://stackblitz.com/edit/angular-ivy-rgchvw?file=src%2Fapp%2Fapp.component.html

component.ts

import { Component, VERSION } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular " + VERSION.major;
  public checkedItems = [];
  public tableHeaderNames = [
    "Header1",
    "Header2",
    "Header3",
    "Header4",
    "Header5"
  ];
  public roles = [
    "Role1",
    "Role2",
    "Role3",
    "Role4",
    "Role5",
    "Role6",
    "Role7"
  ];

  select(e, g) {
    if (e.target.checked === true) {
      let checkedObj = {
        headerName: g,
        cell: "test"
      };
      this.checkedItems.push(checkedObj);
    }
    console.log(this.checkedItems);
  }
}

component.html

<table class="table">
  <thead>
    <tr>
      <th></th>
      <th scope="col" *ngFor="let columnNames of tableHeaderNames"> 
     {{columnNames}}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let role of roles">
      <td>{{ role }}</td>
      <td *ngFor="let roleColumn of tableHeaderNames; let i = index">
        <input (click)="select($event, roleColumn)" type="checkbox">
      </td>
    </tr>
  </tbody>
</table>

Answer 1

You will need to add another parameter for the select($event, roleColumn) to check against the role selected. As you need to check against both headerName and roleNo for cases when it's duplicate in row or column. Then add findIndex and splice for it.

You can make the changes like so

html

<table class="table">
  <thead>
    <tr>
      <th></th>
      <th scope="col" *ngFor="let columnNames of tableHeaderNames">{{columnNames}}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let role of roles">
      <td>{{ role }}</td>
      <td *ngFor="let roleColumn of tableHeaderNames">
        <input (click)="select($event, roleColumn, role)" type="checkbox">
      </td>
    </tr>
  </tbody>
</table>

ts

select(e, g, r) {
    if (e.target.checked === true) {
      let checkedObj = {
        roleNo: r,
        headerName: g,
        cell: "test"
      };
      this.checkedItems.push(checkedObj);
    }
    if (e.target.checked === false) {
      var index: number = this.checkedItems
                    .findIndex(x => x.roleNo === r && x.headerName === g);
      console.log(index);
      if (index > -1) {
        this.checkedItems.splice(index, 1);
      }
    }
    console.log(this.checkedItems);
}

Answer 2

solved it using findIndex() and Splice()

else{
      let index = this.checkedItems.findIndex(
        item => item.headerName === g
      )
      this.checkedItems.splice(index, 1)
    }