Javascript 如何在选中或未选中复选框的情况下从数组中推送和删除项？

在下表中，单击复选框且event.target.checked==true时，我正在将headerName和单元格放入一个数组中，但当event.target.checked==false时，我无法删除该项，因为我没有添加项的索引。任何解决这一问题的线索都将不胜感激

组件。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);
  }
}

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

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>

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

{{columnNames}}
{{role}}

使用findIndex（）和Splice（）解决了这个问题

---

您需要为

select（$event，rolecocolumn）

添加另一个参数，以对照所选的

角色进行检查。因为您需要对照
headerName
和
roleNo
检查行或列中重复的情况。然后为其添加
findIndex
和
splice

你可以这样做

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>

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