Коробка предварительной проверки в Angular Material Tree

Question

У меня есть Angular Дерево материалов, которое я отображаю. Дерево прекрасно работает само по себе, но у меня также есть список имен / идентификаторов, которые уже являются выбранными значениями. Данные предоставлены мне отдельно. Я не смог выяснить, как предварительно проверить коробки внутри дерева при загрузке.

Я создал 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);
    }

У кого-нибудь есть другие предложения? Я не смог найти ни одного примера в Интернете.

Answer 1

Наконец-то нашел похожий пример того, что я искал здесь.

Зацикливая мои существующие узлы и сравнивая их с моим существующим списком выбранных данных; Я могу использовать существующий узел вместо создания новой копии для переключения проверки.

Примерно так:

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