Angular 材质树中的预选框

Question

I have an Angular Material Tree I'm displaying. The tree works fine by itself, but I also have a list of names/ids that are already selected values. The data is given to me separately. I haven't been able to figure out how to precheck boxes inside the tree on load.

I've created a Stackblitz here to show my issue: https://stackblitz.com/edit/angular-ukaq9u

My initial thought was to try and look through my selected list and manually toggle the selected in ngInit like so (this doesn't work though):

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

Does anyone have any other suggestions? I haven't been able to find any examples online.

Answer 1

Finally found a similar example of what I was looking for here.

By looping through my existing nodes and comparing them to my existing list of selected data; I can use the existing node, instead of creating a new copy, to toggle the check.

Like so:

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