首先,我想说的是,我已经用这个兔子钻了一个小洞,以至于我觉得自己可能错过了一个更简单的解决方案。抱歉,如果有一个,它在向我尖叫!
那么问题是
我有一组用户数据,其中包含用户名,姓氏,姓氏,活动状态。
我最初使用手风琴组件显示此用户数据。它接受各节并对其进行迭代,显示从各节输入提供的数据。该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进行渲染。但这并不是偷懒地发生,而是立即填充所有数据。
编辑:我正在使用手风琴组件,因为它适合具有主从类型显示的设计规范,但不是作为附加路由器的细节,而是从视图中隐藏起来。姓氏,姓氏,有效是详细信息,而用户名是主要名称。那么用户的角色就是细节
答案 0 :(得分:0)
是否可以像添加索引那样简单,以便允许延迟加载onclick嵌套内容。看到这篇文章 How to create a lazy load treeview in Angular 7