在Angular Material Tree中删除当前节点上下文

时间:2019-04-09 02:09:36

标签: javascript html angular typescript angular-material

我正在与Angular Material Flat Tree合作。我不会在我的nodeAuthorized: boolean类中仅显示基于treeNode属性的特定节点。如何在node中删除当前的*matTreeNodeDef = "let node; when: hasChild"上下文?

我尝试在<div *ngIf="node.treeNode.nodeAuthorized">内使用<mat-tree-node>,但这为未经授权的节点留出了空白。我可以看到<mat-tree-node>作为未授权节点的空元素出现在DOM中。

我还尝试了修改hasChild方法以返回node.treeNode.nodeAuthorized的方法,但是这只会为该mat-tree-node模板选择节点。

是否可以通过DOM将这些空的<mat-tree-node>丢弃以用于未授权的节点?

<!-- I want to drop <mat-tree-node> when nodeAuthorized = false -->
<mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>
 <!-- The following <div> leaves empty space between nodes -->
 <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>

TreeNode类看起来像这样:

class TreeNode {
   nodeName: string;
   nodeAuthorized: boolean;
   nodeChildren: TreeNode[];
}

平树节点看起来像这样:

class FlatTreeNode {
   constructor(treeNode: TreeNode, level: number, expandable: boolean){}
}

0 个答案:

没有答案