Angular Material Tree - 不同的父/子类型 [英] Angular Material Tree - Different parent/child types

问题描述

有没有办法利用材质树来表示父/子数据结构，其中子数据结构与父数据形状不同?我对这个组件的经验似乎表明数据结构需要是相同类型的递归.但是，我想用它来表示结构，例如带有订单项(子项)的订单(父项).这似乎不是受支持的用例.对吗?

Is there a way to utilize a material tree to represent parent/child data structures where the child has a separate data shape than the parent? My experience with this component seems to indicate that the data structure needs to be a recursion of the same type. However, I would like to use it to represent structures such as Orders (parent) with Order Items (children). This does not seem to be a supported use case. Is that correct?

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

I've been using Angular since the v2 rollout and I've been using Angular Material since inception. In my opinion, the Tree component seems to be the most cumbersome component with the most difficult to sample code.

推荐答案

我遇到了同样的问题，我选择的解决方案是为树组件制作一个扁平结构.结构具有来自父级和子级的所有字段(如果在父级上使用模型，则子级字段在子节点上保持为空且相反).似乎工作得很好.

I had the same issue, the solution I chose was to make a flatten structure just for tree component. Structure have all the fields from parent and child (if model is used on parent, child fields remain empty and opposite on child node). Seems to work just fine.

来自:

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;

}

这篇关于Angular Material Tree - 不同的父/子类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！