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

时间:2018-12-06 16:43:29

标签: angular checkbox tree angular-material

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

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

rootItems是根节点的数组。

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

2 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:0)

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

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