如何隐藏Angular树中的所有子节点?

Question

我用这棵树

节点模型为:

interface FoodNode {
name: string;
children?: FoodNode[];
childVisible?: boolean;
}

我试图隐藏所有的子节点，如果父节点有childVisible为假:

<ul [class.example-tree-invisible]="!treeControl.isExpanded(node)">
<ng-container matTreeNodeOutlet *ngIf="node.childVisible"></ng-container>
</ul>

但是它不适合我，如何隐藏它们?

我也试过这个:

hasChild = (_: number, node: FoodNode) =>
node.childVisible && !!node.children && node.children.length > 0;

Answer 1

正如我在评论中提到的，恕我直言，您的示例工作得很好。除非我不明白你想做什么。

在你的代码中，你有"childVisible: false"水果，他们是隐藏的…现在我修改它以显示更多的"绿色"的子元素，但隐藏了"橙色"的子元素。它也工作得很好(不要忘记，如果您不指定childVisible，那么默认情况下它是false)。查看我的stackblitz