AngularMatTree, кажется, знает, что есть данные, но не будет отображать их

Question

Я пытаюсь создать суперосновный POC AngularMaterialTree.Кажется, что есть данные, но они не отображаются.Я использую this в качестве моего руководства, и у меня здесь есть стек . Я делаю все возможное, чтобы вырезать как можно больше для дальнейшего расширения POC, чтоВот почему hasNestedChildren просто возвращает значение true.

Answer 1

Во-первых, ваши корневые узлы имеют поле prop, а не name. Из-за этого вы не видите текст для корневых узлов. Приведите ваши корневые узлы в соответствие с данными, которые возвращает ваш сервис:

topLevelData = [
  {
    name: 'people'
  },
  {
    name: 'people again'
  }
]

После этого вы получите содержимое своего корневого узла. Но если вы развернете корневой узел, вы не увидите дочерних элементов.

Это происходит потому, что ваша структура данных является вложенной. Поэтому вам нужно использовать компонент mat-nested-tree-node вместо mat-tree-node для узлов с дочерними элементами, как показано в app.component.html , указанном в упомянутом видео.

Затем вам нужно добавить заполнитель для дочерних узлов. Для этого необходимо использовать директиву matTreeNodeOutlet, как показано в строке 20 того же файла.

После этих двух шагов ваша разметка будет выглядеть так:

<mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild">
  <div class="mat-tree-node">
    <button mat-icon-button matTreeNodeToggle>
      <mat-icon class="mat-icon-rtl-mirror">
        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
      </mat-icon>
    </button>
    {{node.name}}
  </div>
  <ul [class.example-tree-invisible]="!treeControl.isExpanded(node)">
    <ng-container matTreeNodeOutlet></ng-container>
  </ul>
</mat-nested-tree-node>

Не забудьте добавить класс CSS example-tree-invisible, чтобы скрыть свернутые узлы, как показано в файле app.component.scss :

.example-tree-invisible {
    display: none;
}

Однако компонент TreeList получит все узлы одновременно. Поскольку в вашем образце нет узлов, у которых нет дочерних элементов, это приведет к исключению StackOverflow. Вы должны ограничить количество узлов в вашем примере. Например, я добавил счетчик:

let counter = 0;

hasNestedChild = (node) => {
  if (counter == 20) {
    return false;
  }
  counter++;
  return true;
}

Вот обновленный образец .