时间戳

首页 > 解决方案 > 如何显示用户结构

angular - 如何显示用户结构

问题描述

我这里有这样一个模型：

export class User{
    constructor(
        public user_id?:number,
        public name?: string,
        public position?: string,
    ) { }
}

我想从这个模型中推导出一个类似于这个的结构。Angular 2+ 中输出类似结构的组件是什么？

以及如何将您建议的组件用于此类模型：

public org_ChartData = [
        ['Name', 'Manager', 'ToolTip'],
        [{ v: 'Mike', f: 'Mike<div style="color:red; font-style:italic">President</div>' },
            '', 'The President'],
        [{ v: 'Jim', f: 'Jim<div style="color:red; font-style:italic">Vice President</div>' },
            'Mike', 'VP'],
        ['Alice', 'Mike', ''],
        ['Bob', 'Jim', 'Bob Sponge'],
        ['Carol', 'Bob', '']
    ]

但是对于我上面显示的模型。只是我之前没做过这样的方案，一般也没有用chartjs，所以不要严格判断。

标签： angular

解决方案

是的，你可以这样做。但是为了显示一个结构体，我强烈建议你有时花点时间看看这里的复合模式

因此，您上面的结构将与此类似。

export class User{
 constructor(
   public user_id?:number,
   public name?: string,
   public position?: string,
 ) { }

 users: User[];

 logInfor() {
   console.log([this.user_id, this.name, this.position].join('')];
   // Here is the child composite
   users.forEach((user: User) => user.logInfor());
 }
}

那么你的 org_ChartData 可能是一个组合。
并且组件能够呈现图表。
你只需要创建一个'UserCardComponent'来渲染单个'User'和'OrgChartComponent'这是上面的架构来渲染'Chart'
我猜为了从上面的json创建'User'层次结构可能很漂亮不过对你来说很容易，只是循环和循环。

希望对您有所帮助。

推荐阅读