Question

我正在使用Tree with checkboxes，并且我想添加一个按钮来检查所有复选框，我尝试了不同的方法，但是没有效果，我能够实现的最好的结果是：

  selectAllFiscal() {
    this.rootItems.forEach(node => {
      this.todoItemSelectionToggle(node);
    });
  }

rootItems是根节点的数组。

我可以看到在迭代checklistSelection.selected时选择了节点，但是在浏览器中未选中复选框，任何人都可以指出问题，谢谢。

Answer 1

尝试以下方法作为您的方法

checkAll(){
    for (let i = 0; i < this.treeControl.dataNodes.length; i++) {
        this.checklistSelection.toggle(this.treeControl.dataNodes[i]);
        this.treeControl.expand(this.treeControl.dataNodes[i])
    }
  }

Stackblitz

https://stackblitz.com/edit/angular-hpsj5x?embed=1&file=app/tree-checklist-example.html

Answer 2

第一个答案中有一个错误，如果您按全选，并且您已经从树中选择了一个复选框，则仅在切换而不是全选/取消全选。这是我的解决方案：

在HTML中使用与此类似的内容：

<mat-checkbox [checked]="isAllSelected" (change)="selectAll()">Select all</mat-checkbox>

在您的组件中：

selectAll(): void {
    this.select = !this.select;
    this.treeControl.dataNodes.forEach((r, index) => {
      this.treeControl.expand(this.treeControl.dataNodes[index]);
      this.select
        ? this.checklistSelection.select(this.treeControl.dataNodes[index])
        : this.checklistSelection.deselect(this.treeControl.dataNodes[index]);
    });
    this.isAllSelected = true;
  }

带有复选框的Angular Material mat-tree全选

2 个答案: