时间戳

首页 > 解决方案 > Angular Material Tree - 不同的父/子类型

angular - Angular Material Tree - 不同的父/子类型

问题描述

有没有办法利用材料树来表示父/子数据结构，其中子数据结构与父数据形状不同？我对这个组件的经验似乎表明数据结构需要是相同类型的递归。但是，我想用它来表示诸如 Orders（父级）和 Order Items（子级）之类的结构。这似乎不是受支持的用例。那是对的吗？

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

标签： angularangular-material

解决方案

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

从：

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;

}

推荐阅读