可重用组件中的 AnyChart 未出现在正确的 DOM 位置（Angular 9.1.3、Bootstrap 4.4.1、Anychart 8.7.1）

Question

我正在使用两个 Bootstrap 卡做一个简单的测试仪表板，每个卡都包含一个 Anychart 柱形图。目标是使用可重用组件。

上的代码 link

当我运行代码时，我希望在第二张卡片的正文中看到第二张图表。但是，当我通过浏览器中的开发工具 (Chrome) 检查 DOM 时，我发现第二张图表似乎绘制在第一张卡片的 <app-bar-chart> 标签内的第一张图表的正下方。并且没有图表出现在第二张卡片的 <app-bar-chart> 标签内。您可以看到第二张图表填充了两张卡片后面的 space。

我尝试在几个级别使用 Bootstrap "container" 和 "row/col-12" class 标签，但没有成功。

各部分的总体概况如下：

  app.component               (dashboard)
  |--card.component           (reusable card, data 1)
     |--bar-chart.component   (reusable chart)
  |--card.component           (reusable card, data 2)
     |--bar-chart.component   (reusable chart)

感谢您提前提出任何想法、指点和建议！

Answer 1

我不知道 TS，但是我知道 JS 是如何工作的，所以我从 JS 的角度给了你一个答案。

这个问题来自于TS，当你调用

<app-card-component [dataSet]="dataSet1" [title]="'Data Set 1'"></app-card-component>

上面的代码，它渲染了卡片组件并进入 bar-chart 组件，它会找到 this.chart.container("chartContainer"); 当你想要绘制你的 anychart 时的代码，它会在 DOM 中找到并在 chartContainer 中分配该图表，然后你调用

<app-card-component [dataSet]="dataSet2" [title]="'Data Set 2'"></app-card-component>

并且会发生我上面描述的相同过程。

所以每次你调用 app-card-component 它都会将你的图表分配到你之前的图表下方，所以

解决办法是给每个id一个索引，动态化chartContainer。像 chartContainer1、chartContainer2 等等..

可重用组件中的 AnyChart 未出现在正确的 DOM 位置（Angular 9.1.3、Bootstrap 4.4.1、Anychart 8.7.1）

AnyChart within reusable component not appearing in correct DOM position (Angular 9.1.3, Bootstrap 4.4.1, Anychart 8.7.1)

html

typescript

anychart

bootstrap-4

angular