Как визуализировать определенные узлы дерева в плоском дереве Angular Material на основе свойства узла?

Question

Я хочу отобразить определенные узлы дерева <mat-tree-node> на основе свойства nodeAuthorized: boolean узла. Как я могу добиться этого, так как angular не допускает более двух структурных директив на один элемент.

Я пытался использовать свойство nodeAuthorized для единственного дочернего элемента <div> из <mat-tree-node>, но это создает пустое пространство между 2 или более узлами дерева. Любая помощь будет оценена?

Это то, что я пробовал, но это оставляет очевидное пустое пространство между узлами, которое мне не нужно.

<mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>
 <div *ngIf="node.treeNode.nodeAuthorized">   
  <button mat-icon-button matTreeNodeToggle>
   <mat-icon class="mat-icon-rtl-mirror">
    {{
       treeControl.isExpanded(node) ? "expand_more" : "chevron_right"
     }}
    </mat-icon>
   </button>

   {{node.treeNode.nodeName}}
 </div>
</mat-tree-node>

Answer 1

*matTreeNodeDef может использоваться с <ng-container>, который затем может использоваться с другим элементом HTML, например, <div> и структурной директивой *ngIf для визуализации определенных узлов.