Angular 材质树中的预选框答案

【问题标题】：Precheck box in Angular Material TreeAngular 材质树中的预选框
【发布时间】：2020-02-19 23:12:21
【问题描述】：

我正在展示一个 Angular 材质树。树本身工作正常，但我也有一个已经选择值的名称/ID 列表。数据是单独给我的。我无法弄清楚如何在加载时预先选中树内的框。

我在这里创建了一个 Stackblitz 来显示我的问题：https://stackblitz.com/edit/angular-ukaq9u

我最初的想法是尝试查看我选择的列表并像这样手动切换 ngInit 中的选择（但这不起作用）：

    for (const pg of selectedBoxes) {
      let leaf = new TodoItemFlatNode();
      leaf.item = pg.Product_Group_ID.toString();
      leaf.level = 1;
      leaf.expandable = false;
      this.todoLeafItemSelectionToggle(leaf);
    }

还有人有其他建议吗？我一直无法在网上找到任何示例。

【问题讨论】：

[checked]="true" 勾选复选框
这只是检查每一个盒子......
你问的是“如何预先勾选复选框”。
如果你想有条件地检查它们，你可以使用一个函数来检索状态。
在我上面的代码中，我循环并选择选定的数据以有条件地选中这些框并将它们放在 checklistSelection 中，该选项正在[checked] 属性中使用。但它不起作用，因此我的问题在这里。

标签： javascript angular typescript tree angular-material

【解决方案1】：

终于找到了我要找的类似例子here.

通过循环访问我现有的节点并将它们与我现有的选定数据列表进行比较；我可以使用现有节点而不是创建新副本来切换检查。

像这样：

    for (let i = 0; i < this.treeControl.dataNodes.length; i++) {
      for (const pg of selectedBoxes) {
        if (this.treeControl.dataNodes[i].item == pg.Product_Group_Name) {
          this.todoItemSelectionToggle(this.treeControl.dataNodes[i]);
          this.treeControl.expand(this.treeControl.dataNodes[i])
        }
      }
    }

【讨论】：