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

【问题标题】：Angular Material mat-tree with checkboxes select all带有复选框的 Angular Material mat-tree 全选
【发布时间】：2019-05-08 10:06:22
【问题描述】：

我正在使用Tree with checkboxes，我想添加一个按钮来检查所有复选框，我尝试了不同的方法但效果不佳，我能做到的最好的事情是：

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

rootItems 是一个根节点数组。

我在迭代checklistSelection.selected时可以看到节点被选中，但是浏览器中没有选中复选框，谁能指出问题，谢谢。

【问题讨论】：

标签： angular checkbox tree angular-material

【解决方案1】：

为您的方法尝试以下方法

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

堆栈闪电战

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

【讨论】：

这有一个错误，如果您已经选择了一个节点，当您按下 checkAll 时会取消选择已经存在的选择
查看对 stackblitz 的修订。您是对的，但您可以利用 SelectionModel 的 isSelected() 函数。在我看来，与在您的解决方案中使用 this.select 相比，这对于您的开发团队成员来说会更简洁、更易读。

【解决方案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;
  }

【讨论】：

您应该使用this.checklistSelection.isSelected() 来检查复选框的当前状态，这就是该功能的用途。请参阅上面对原始答案的修订。
@Marshal 你需要跟踪你的标志以获得切换效果。