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

Question

使用Angular 6：

我有一个带有数据的HTML表，其中一行是一个复选框，用户可以选择单个行，也可以使用标题中的select all checbox来选择所有行。

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

只需在上面发布相关代码即可。

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

这里一切都很好。 当用户取消选中所选值时，问题就来了，但我不确定如何从this.allSelectedData中删除该值。

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

我正在寻找的是this.allSelectedData应该包含所有选择。 如果有人选中新行，则添加到此行；如果有人取消选中某行，则对其进行更新以删除该条目。

谢谢

Answer 1

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

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

}

Answer 2

我这样做，希望对您有所帮助。

1. 使用数组selectedIds保存所选项目，它也非常适合在提交数据时使用。
2. 选择项目时：

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

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

3. 检查项目选择状态时，请执行selectedIds.indexOf(item.id) !== -1 。
4. 检查所有选定状态时，请执行selectedIds.length && selectedIds.length === data.length 。
5. 当你点击selectAll按钮：

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

1. selectedIds和data都可能为0，因此需要selectedIds.length && ...
2. this.selectedIds.length && this.selectedIds.length === this.data.length可以写为getter类型。

Answer 3

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

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