取消选中垫角表中的所有垫角复选框，而无需在数据集中添加任何新列

Question

我正在研究Angular-6和Mat Angular组件。我为表的所有行添加了复选框，现在我想在某些事件中重置所有复选框。

示例：当页面加载时，所有复选框都将被取消选中，而我只检查了很少的复选框，一旦单击标题复选框，则所有其他复选框都应选中/取消选中。< / p>

示例：https://stackblitz.com/edit/uncheckall?file=src%2Fapp%2Fapp.component.ts

注意：已经进行了一些搜索，但是所有解决方案都建议创建一个我希望避免的数组，因为我无法修改来自服务器的数据，也不想不必要地增加数据大小。

如果您不理解该问题，请让我知道在降级该问题之前先进行澄清。

Answer 1

  

目标

您要查找复选框和取消选中复选框，而不复制现有数据ELEMENT_DATA。

  

解决方案

要执行多个复选框的选中和取消选中操作，必须具有所有复选框的绑定。因此，我们需要再添加一个变量checkboxStates，该变量将仅包含复选框状态，而不包含整个复制的数据。这样，我们可以避免额外的内存消耗，并保持原始数据不变。

步骤1

创建变量以保留复选框状态

checkboxStates = {}

步骤2

为所有复选框创建默认状态

  constructor() {
    ELEMENT_DATA.forEach(item => {
      this.checkboxStates[item.position] = false
    });
  }

步骤3

选中和取消选中操作

changeCheckBoxesStatus(e: MatCheckboxChange) {
    console.log(e.checked)
    if (e.checked) {
      Object.keys(this.checkboxStates).forEach(key => {
        this.checkboxStates[key] = true;
      })
    } else {
      Object.keys(this.checkboxStates).forEach(key => {
        this.checkboxStates[key] = false;
      })
    }
  }

步骤4

绑定复选框模型

<mat-checkbox [(ngModel)]="checkboxStates[element.position]" ></mat-checkbox>

这是工作副本-https://stackblitz.com/edit/uncheckall-yhvaw5