Развернуть определенный узел дерева угловых материалов

Question

Я использую Angular Material Tree, и мне нужно расширить по определенной логике определенные узлы.

Я создал пример, начиная с одного из примеров, представленных в официальной документации Angular Material.

При запуске страница выглядит следующим образом

Если я нажму кнопку Развернуть узел с фруктами Я бы хотел перейти к следующей визуализации

Код, который управляет нажатием кнопки, следующий:

expandNode() {
    this.nestedNodeMap.forEach((node) => {
      if (node.item === "Fruits") {
        this.treeControl.expand(node);
      }
    });
  }

К сожалению, если я нажму кнопку, ничегослучается.Любое предложение о том, как достичь желаемого поведения?

Пример кода можно попробовать здесь .

Answer 1

Ваша проблема в том, что вы не расширяете родителя.

Элемент управления деревом расширяет только данный узел или потомков узла (чтобы развернуть их все сразу).

Это означает, что вам нужно найти родителя, затем развернуть его, а затем развернуть его потомок.

Вот рабочий стек и соответствующий код:

  if (node.item === 'Groceries') {
    console.log('parent found');
    this.treeControl.expand(node);
  }
  if (node.item === "Fruits") {
    console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>found', node);
    this.treeControl.expand(node);
  }