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

Question

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

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

示例： 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
    });
  }

第三步

检查和取消检查操作

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

第四步

绑定复选框模型

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

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