Angular 角度：HTML表格句柄选中/取消选中/全部选中

使用角度6：

我有一个包含数据的HTML表，其中一行是一个复选框，用户可以在其中选择单个行，或者使用select all checbox in header选择所有行

  <table class="table table-hover table-responsive table-striped">
    <thead>
      <tr>
        <th>
          <a>
            <input type="checkbox" [(ngModel)]="masterSelected" name="list_name" value="m1" (change)="checkUncheckAll()" />
          </a>
        </th>
        </tr>
    </thead>
    <tbody>
      <tr *ngFor="let c of data">
        <td>
          <input type="checkbox" [(ngModel)]="c.isSelected" value="{{c.name}}" (change)="isAllSelected()">
        </td>
       <td>other td data goes below</td>
      </tr>
    </tbody>
  </table>

  Below is my Angular component code:

  export class GridComponent implements OnChanges {
  @Input() data: any[] = [];
  allSelectedData: any[]=[];

   checkUncheckAll() {
    for (let i = 0; i < this.data.length; i++) {
      this.data[i].isSelected = this.masterSelected;
    }
    this.getCheckedItemList();
  }
  isAllSelected() {
    this.masterSelected = this.data.every(function (item: any) {
      return item.isSelected === true;
    });
    this.getCheckedItemList();
  }

  //Method called when checbox is checked and to update the array
  getCheckedItemList() {
    this.checkedList = [];
    for (let i = 0; i < this.data.length; i++) {
      if (this.data[i].isSelected) {
        this.allSelectedData.push(this.data[i]);
      }
    }       
    //Calling my service observable to store the data which other components can subscribe to
    this.myService.setSelectedData(this.allSelectedData);
  }  
 }

其他td数据如下所示
下面是我的角度组件代码：
导出类GridComponent实现OnChanges{
@输入（）数据：任意[]=[]；
allSelectedData:任意[]=[]；
checkUncheckAll（）{
for（设i=0；i

只是张贴上面的相关代码

当用户通过单击复选框或选择所有行来选择单行时，我使用this.allSelectedData保存所选数据

这里一切都很好。当用户取消选中所选值时会出现问题。我不知道如何从this.allSelectedData中删除该值

我是否必须再次遍历所有内容并检查单个值，或者是否有更好的方法来执行此操作

我要找的是这个.allSelectedData应该包含所有选择。如果有人检查新行，则添加到此行，如果有人取消选中某行，则更新此行以删除该条目

---

谢谢

我这样做，希望能帮助你

使用数组

selecteds

保存所选项目，它也非常适合在提交数据时使用

选择项目时：

执行此操作

selectedds.indexOf（item.id）！=-1

检查项目的选定状态时

检查所有选定状态时执行此操作

单击

selectAll

按钮时：

selecteds

和

data

两者可能都是0，因此需要

selecteds.length&&…

this.selectedds.length&&this.selectedds.length==this.data.length

可以作为

getter

类型写入

试试这个，这是用户从前端选择的行

}

---

这只是一个想法，尝试根据您的要求定制此代码

我需要在上面添加哪些内容？你能根据我的代码提供详细信息吗？请看下面的示例和描述如果你看到我的代码，我不会从我的网格中传递任何行。当选中单个行时，我调用isAllSelected（），当选中表头的所有checbox时，我调用checkUncheckAll。

select(id) {
  const index = this.selectedIds.indexOf(id);

  if (index !== -1) {
    this.selectedIds.splice(index, 1);
  } else {
    this.selectedIds.push(id);
  }
}

selectAll() {
  if (this.selectedIds.length && this.selectedIds.length === this.data.length) {
    this.selectedIds = [];
  } else {
    // there you need get every item'id, so do map
    // Can be optimized here, if selectedIds has it's id, just skip it...
    this.selectedIds = this.data.map(item => item.id);
  }
}

singleSelecttion(row){
this.selectAllItems=false;
row.isSelected =! row.isSelected;
if(row.isSelected ==true){
    var index = this.selectedRowArr.map(function(item){
        return item.Id;
    }).indexOf(row.Id);
    if(index== -1){
        this.selectedRowArr.push(row);
    }
}
else if(row.isSelected ==false){
    var index = this.selectedRowArr.map(function(item){
        return item.Id;
    }).indexOf(row.Id);
    if(index != -1){
        this.selectedRowArr.splice(index,1);
    }
}       

//function here parameter row is yor selected r unselected row
singleSelecttion(row){
// all item selected false
this.c.isSelected = false;
// masterSelected toggle the value if true then false, else false then true
row.masterSelected =! row.masterSelected;
//you have to add a key isSelected in yor data each row, when data comes add a isSelected key by default false. 
if(row.isSelected ==true){
// selectedRowArr is a array in which value push or pop, here id is unique key
    var index = this.selectedRowArr.map(function(item){
        return item.Id;
    }).indexOf(row.Id);
    if(index== -1){
        this.selectedRowArr.push(row);
    }
}
else if(row.isSelected ==false){
    var index = this.selectedRowArr.map(function(item){
        return item.Id;
    }).indexOf(row.Id);
    if(index != -1){
        this.selectedRowArr.splice(index,1);
    }
}