角: HTML表句柄检查/取消检查/检查所有

Question

使用角6：

我有一个带有数据的HTML表，其中一行是复选框，用户可以选择单个行，也可以使用头中的“选择所有”复选框来选择所有行。

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

1. 检查所选项状态时执行此selectedIds.indexOf(item.id) !== -1操作。
2. 检查所有选定状态时执行此selectedIds.length && selectedIds.length === data.length。
3. 单击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);
    }
}

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