Question

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

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

Answer 1

周五晚上班时遇到一个类似的问题，对此结果感到不满意，所以嘲笑了一个可以满足您需求的堆叠炸弹。 @Jaikumar的链接很有帮助-https://material.angular.io/cdk/tree/api#NestedTreeControl。

有关该示例的工作示例，请参见基于matTree示例的https://stackblitz.com/angular/lneeokqoxvm修改后的stackblitz。

除了修改接口以适合松散的数据结构外，关键是在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

希望即使您几个月前问过这个问题，您也会发现这很有帮助。

Answer 2

我遇到了同样的问题，我选择的解决方案是为树组件制作一个扁平的结构。结构具有父级和子级的所有字段（如果在父级上使用模型，则子级字段为空，而在子节点上相反）。似乎工作正常。

发件人：

export interface ParentModel{
  id: number;
  name: string;    
  child: ChildModel[];    
}

export interface ChildModel{
  id: number;
  symbolName: string;    
  description: string;    
}

收件人：

export interface TreeModel {
  id: number;
  name: string; 
  symbolName: string;
  description: string;

}

Answer 3

只是遇到了同样的问题，由于没有可用的示例，我想出了以下解决方案。

/**
 * Any class that implements toString is now usable inside a tree
 */
export interface IString {
    toString : () => string;
}

/**
 * Node for to-do item
 */
export interface Node {
    children? : Node[];
    item : IString;
}

/** Flat to-do item node with expandable and level information */
export interface FlatNode {
    item : IString;
    level : number;
    expandable : boolean;
}

在此处查看Stackblitz：https://stackblitz.com/edit/angular-rwur5a

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

3 个答案: