填充嵌套数据的最佳方法

Question

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

那么问题来了：

我有一组用户数据，其中包含用户名，姓氏，姓氏，有效。

我最初使用手风琴组件来呈现此用户数据。 它接受各节并对其进行迭代，显示从各节输入提供的数据。 该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进行渲染。 但这不会偷懒地发生，而是立即填充所有数据。

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

Answer 1

就像添加索引以允许嵌套加载onclick的延迟一样简单。 看到这篇文章如何在Angular 7中创建延迟加载treeview