物料数据表的复选框问题

Question

我有显示数据集的材料数据，也有选择框，当从选择框中选择动物名称时，将基于选择框数据s检查选择框，将检查从数组中选择的数据在复选框中，此问题是当我尝试取消选中已检查的ID时，它正在拼接不同的ID，而不是我未选中的ID，并且在检查ID时也存在相同的问题。请帮助找到问题。

animal.ts

import {
  Component,
  OnInit
} from '@angular/core';
import {
  SelectionModel
} from '@angular/cdk/collections';
import {
  MatTableDataSource
} from '@angular/material';


export interface PeriodicElement {
  name: string;
  position: number;
  state: boolean;
  selected: boolean;

}

/**
 * @title Basic use of `<table mat-table>`
 */
@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.css'],
  templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {
  animals = [];
  desiCow = [];
  dataSource = [];
  checkedId = [];
  valueId = [];
  falCheckbox = [];
  checkEachObj = [];
  checked = false;
  mappedValue = false;
  displayedColumns: string[] = ['select', 'position', 'name'];
  ArrayOne = [{
    Key: "Category1",
    value: [{
        position: 1,
        name: 'Helium',
        state: false,
        selected: false
      },
      {
        position: 2,
        name: 'Lithium',
        state: false,
        selected: false
      },
      {
        position: 3,
        name: 'Barium',
        state: false,
        selected: false
      }
    ]
  }, {
    Key: "Category2",
    value: [{
        position: 4,
        name: 'Light',
        state: false,
        selected: false
      },
      {
        position: 5,
        name: 'Hydrogen',
        state: false,
        selected: false
      },
      {
        position: 6,
        name: 'Beryllium',
        state: false,
        selected: false
      }
    ]
  }]
  ngOnInit() {
    this.getAnimalsType();
  }
  getAnimalsType() {
    this.animals.push({
      id: 62,
      name: "desicow"
    }, {
      id: 63,
      name: "jersey"
    })
  }
  selectAnimalType(event) {
    console.log(event, "evemt")
    this.checkedId = [];
    this.valueId = [];
    this.falCheckbox = [];
    this.dataSource = [];

    this.ArrayOne.forEach(item => {
      for (let j = 0; j < item.value.length; j++) {
        item.value[j].state = false;
        item.value[j].selected = false;
        this.dataSource.push(item.value[j])
      }
    })
    if (event == 62) {
      this.desiCow = []
      this.desiCow.push({
        position: 5,
        name: 'Hydrogen',
        state: true,
        selected: true
      }, {
        position: 6,
        name: 'Beryllium',
        state: true,
        selected: true
      })
    }
    if (event == 63) {
      this.desiCow = []
      this.desiCow.push({
        position: 1,
        name: 'Helium',
        state: true,
        selected: true
      }, {
        position: 2,
        name: 'Lithium',
        state: true,
        selected: true
      }, {
        position: 3,
        name: 'Barium',
        state: true,
        selected: true
      })
    }
    console.log(this.dataSource)
    this.mapObjectBasedOnAnimal(event)
  }
  mapObjectBasedOnAnimal(animalId) {
    console.log(this.dataSource, "desicow")
    console.log(this.desiCow, "desicow")
    this.desiCow.forEach(element => {
      // console.log(element,"elleleleel")
      if (element.position != undefined) {
        if (element.position) {
          if (this.checkedId.indexOf(element.position) < 0) {
            this.checkedId.push(element.position)
            this.valueId.push(element)
          }
          console.log(this.valueId, "valueID")
        }
      }
      this.falCheckbox = this.valueId
    })
    for (let v = 0; v < this.desiCow.length; v++) {
      for (let k = 0; k < this.dataSource.length; k++) {
        if (this.dataSource[v] != undefined) {
          if (this.dataSource[k].position === this.desiCow[v].position) {
            this.dataSource[k].state = this.desiCow[v].state;
            this.dataSource[k].selected = this.desiCow[v].selected;
            console.log("success", this.dataSource[k]);
          }
        }
      }
    }
  }
  //function to select all for checkbox
  checkall(event, sbValue, i) {
    this.checked = event;
    sbValue.forEach(x => x.state = event)
    console.log(this.checkedId, "checkedaId before")
    if (event == true) {
      sbValue.forEach(item => {
        if (this.checkedId.indexOf(item.position) < 0) {
          this.checkedId.push(item.position)
          this.valueId.push(item)
          item.selected = event;
        }
      })
      console.log(this.checkedId, "checed")
      this.falCheckbox = this.valueId
    } else if (event == false) {
      for (let i = 0; i < this.falCheckbox.length;) {
        if (this.falCheckbox[i].position == this.checkedId[i]) {
          console.log(this.falCheckbox[i].position, "=====", this.checkedId[i])
          this.checkedId.splice(i, 1)
          this.falCheckbox.splice(i, 1)
        }
        console.log(this.checkedId, "fal after clear")
      }
      for (let i = 0; i < this.falCheckbox.length;) {
        if (this.falCheckbox[i].position == this.checkedId[i]) {
          console.log(this.falCheckbox[i].position, "=====", this.checkedId[i])
          this.checkedId.splice(i, 1)
          this.falCheckbox.splice(i, 1)
        }
        console.log(this.checkedId, "fal after clear")
      }

    }
  }
  //function to select each for checkbox
  checkEach(item, i, event) {
    console.log(item, event)
    if (event.checked == true) {
      if (this.checkedId.indexOf(item.position) < 0) {
        this.checkedId.push(item.position)
        this.checkEachObj.push(item);
        item.selected = event.checked;
      }
    }
    this.falCheckbox = this.checkEachObj
    console.log(this.falCheckbox, "falcheckbox", this.checkedId)
    if (event == false) {
      const index = this.falCheckbox.indexOf(i);
      this.checkedId.splice(index, 1)
      console.log(this.checkedId, "checkediddd for each")
    }
  }
}

在上面的代码中，我具有用于选中所有复选框或选中每个复选框的代码，两者都有相同的问题，我无法为其找到正确的解决方案

Animal.html

<mat-grid-list cols="3" rowHeight="3:3">
  <form class="example-form" #form="ngForm" (ngSubmit)="mapAnimalType(form.value)">
    <mat-grid-tile>
      <h6 class="catTitle">Animal Type</h6>
    </mat-grid-tile>
    <mat-grid-tile>
      <mat-form-field>
        <mat-select required (selectionChange)="selectAnimalType(animal)" [(ngModel)]="animal" name="animal" placeholder="Select Animal Type">
          <mat-option *ngFor="let animal of animals" [value]="animal.id">
            {{animal.name}}
          </mat-option>
        </mat-select>
        <mat-error>Animal Type is required</mat-error>
      </mat-form-field>
    </mat-grid-tile>
    <mat-grid-tile>
      <button type="submit" mat-raised-button class="primary-button" color="primary">Submit</button>
    </mat-grid-tile>
  </form>
</mat-grid-list>

<div *ngFor="let sb of ArrayOne; let in = index">
  <h5 class="sb__key">key:- {{sb.Key}}</h5>
  <table mat-table [dataSource]="sb.value" class="mat-elevation-z8">

    <!-- Checkbox Column -->
    <ng-container matColumnDef="select">
      <th mat-header-cell *matHeaderCellDef>
        <mat-checkbox [ngModel]="sb.value[in]?.selected" (ngModelChange)="checkall($event,sb.value,in)"></mat-checkbox>
      </th>
      <td mat-cell *matCellDef="let element; let i = index">
        <mat-checkbox [value]="element.position" [(ngModel)]="element.state" (change)="checkEach(element,i,$event)"></mat-checkbox>
      </td>
    </ng-container>

    <!-- Position Column -->
    <ng-container matColumnDef="position">
      <th mat-header-cell *matHeaderCellDef> No. </th>
      <td mat-cell *matCellDef="let element"> {{element.position}} </td>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef> Name </th>
      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)">
    </tr>
  </table>
</div>

下面是运行代码的链接 https://stackblitz.com/edit/angular-3kbmuh-g3eepr

谢谢