如何根据节点属性在 Angular Material 平面树中渲染特定的树节点？答案

【问题标题】：How to render specific tree nodes in Angular Material flat tree based on a node property?如何根据节点属性在 Angular Material 平面树中渲染特定的树节点？
【发布时间】：2019-08-26 13:00:45
【问题描述】：

我想根据节点的 nodeAuthorized: boolean 属性显示特定的树节点 <mat-tree-node>。我怎么能做到这一点，因为角度不允许单个元素上超过 2 个结构指令。

我尝试在 <mat-tree-node> 的唯一子 <div> 上使用 nodeAuthorized 属性，但这会在 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>

【问题讨论】：

标签： javascript angular typescript angular-material angular7

【解决方案1】：

*matTreeNodeDef 可以与 <ng-container> 一起使用，然后可以与另一个 HTML 元素一起使用，例如 <div> 和结构指令 *ngIf 以呈现特定节点。

<ng-container *matTreeNodeDef="let node">
    <ng-container *ngIf="node.authorized"> /** node rendering condition goes here */
      <mat-tree-node matTreeNodePadding>
        <button mat-icon-button matTreeNodeToggle>
          <mat-icon class="mat-icon-rtl-mirror">
            {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
          </mat-icon>
        </button>
        {{node.name}}
      </mat-tree-node>
    </ng-container>
  </ng-container>

【讨论】：

您能举个例子吗？
@Chandermani 我已经用示例更新了我的答案。