填充嵌套数据的最佳方法

时间:2019-09-05 11:46:44

标签: angular typescript frontend

首先,我想说的是,我已经用这个兔子钻了一个小洞,以至于我觉得自己可能错过了一个更简单的解决方案。抱歉,如果有一个,它在向我尖叫!

那么问题是

我有一组用户数据,其中包含用户名,姓氏,姓氏,活动状态。

我最初使用手风琴组件显示此用户数据。它接受各节并对其进行迭代,显示从各节输入提供的数据。该sections数组将填充有从后端API提取的数据,但将其转换为以下部分:

组件TS

public sections = [
    {
       id: 1,
       username: 'john-doe',
       forename: 'John',
       surname: 'Doe'
    },
    { 
       id: 2,
       username: 'jane-doe',
       forename: 'Jane',
       surname: 'Doe'
    },
}];

组件HTML

<app-ui-accordion [sections]="sections"></app-ui-accordion>

手风琴组件


<div class="ui-accordion__panel" *ngFor="let item of data">
    <a class="ui-accordion__heading">{{ item.username }}</a>
    <div class="ui-accordion__content">
        ... 
        Code for showing usernanme, forename, surname.
        ...

        [But also would like to show extended table data here when user clicks ui-accordion__heading]
    </div>
</div>

每个ui-accordion__heading处理一个click事件,该事件通过设置ui-accordion--active类来打开ui-accordion__content。

我想要实现的是,要以某种方式能够单击面板标题,打开panel__content div,然后通过一些魔术路由或延迟加载组件-然后可以使用用户角色填充表。

因此,小组正在按预期工作,但我只是在努力寻求正确的方法,即使在这种情况下甚至也没有。

我是否滥用UiAccordion组件,以致可重用的演示组件不应该那么复杂?

为每次迭代重复路由器出口,然后订阅paramMap,以便组件能够使用不同的用户ID进行ngOnInit。

传入模板并使用* ngTemplateOutlet进行渲染。但这并不是偷懒地发生,而是立即填充所有数据。

编辑:我正在使用手风琴组件,因为它适合具有主从类型显示的设计规范,但不是作为附加路由器的细节,而是从视图中隐藏起来。姓氏,姓氏,有效是详细信息,而用户名是主要名称。那么用户的角色就是细节

1 个答案:

答案 0 :(得分:0)

是否可以像添加索引那样简单,以便允许延迟加载onclick嵌套内容。看到这篇文章 How to create a lazy load treeview in Angular 7