角材质树-不同的父/子类型

Question

有没有一种方法可以利用材料树来表示父级/子级数据结构，其中子级具有与父级不同的数据形状？我在该组件上的经验似乎表明，数据结构必须是相同类型的递归。但是，我想用它来表示诸如订单（父项）和订单项（子项）之类的结构。这似乎不是受支持的用例。那是对的吗？

自从v2推出以来，我一直在使用Angular，并且自开始以来就一直在使用Angular Material。在我看来，Tree组件似乎是最麻烦的组件，并且最难采样代码。

Answer 1

周五晚些时候在工作中遇到了类似的问题，对结果不满意，因此模拟了一个可能满足您需求的 stackblitz。@Jaikumar 的链接很有帮助 - https://material.angular.io/cdk/tree/api#NestedTreeControl。

请参阅此修改后的 stackblitz - https://stackblitz.com/angular/lneeokqoxvm基于 matTree 示例作为工作示例。

除了修改接口以适应松散的数据结构之外，关键是在 NestTreeControl 中，最后的函数似乎是属性/函数 getChildren。

interface FoodNode {
  name: string;
  children?: FoodNode[]; 
}
...
new NestedTreeControl<FoodNode>(node => node.children)

修改为：

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

...

new NestedTreeControl<FoodNode>(node => {
      return (node.children) ? node.children : node.subChildren;
});

类末尾的 hasChild 函数也必须考虑到增加的复杂性：

 hasChild (_: number, node: FoodNode): boolean {
   return (node.subChildren) ? 
    !!node.subChildren && node.subChildren.length > 0 : 
    !!node.children && node.children.length > 0;
  }

双响！！让我找到了这个参考 - https://medium.com/better-programming/javascript-bang-bang-i-shot-you-down-use-of-double-bangs-in-javascript-7c9d94446054

希望您觉得这对您有所帮助，即使您几个月前就提出了这个问题。