我想做一个动态 Jmeter 板来显示信息的能力,选择一个图表来表示它。
在我的项目中,我连接了angular-gridster2
包来使用动态网格https://www.npmjs.com/package/angular-gridster2。
我使用Chart.js
库来处理图表。
对于模块的动态插入,我使用ndc-dynamic
包https://www.npmjs.com/package/ng-dynamic-component
图形的初始加载是正确的,但是当我尝试单击按钮添加另一个带有相应图表的块时,网格中的块被添加,并且图表不是在新添加的块中呈现,而是在已经有这样一个图表的同一个块中呈现。我不明白为什么会发生这种情况。
我在stackblitz
https://stackblitz.com/edit/angular-ivy-axd7cw?file=src/app/components/chart-bar/chart-bar.component.html中给出了所有包含工作组件的代码
有人能帮我吗?
1条答案
按热度按时间wj8zmpe11#
您在组件中使用了
id
。在创建图表时,您引用了id
选择器。因此,显然,它重新呈现了与id
选择器匹配的第一个组件。您必须在每次组件生成时生成一个新的
id
,并以这种方式呈现。HTML格式
组件
Forked Stackbliz
注:-由于我们正在从组件动态生成ID,因此我们已将图形绘制代码从
ngOnInit
移至ngAfterViewInit
(以确保在查询之前在UI上生成和更新id
)生命周期挂钩。