Angular 在 div 可见时显示图表

Question

我有一个任务列表，当我点击一个任务时，通过

<a (click)="showMission(mission);"...

我调用这个函数

showMission(mission) {
      this.scrollUp();
      this.mission = mission;
      if (this.showHideMission === false) {
            this.showHideMission = true;
      }

      this.showHideCreateMission = false;
      this.showHideEditMission = false;
  }

将这个div的状态更改为true

<div *ngIf="showHideMission" class="ng-hide m-portlet m-portlet--full-height ">

并允许我读取里面的数据。

我想在这个 div 中显示来自 amchart 的图表，然后我插入了

<div id="chartdiv" style="width: 100%; height: 400px; background-color: #FFFFFF;" ></div> 在<div *ngIf="showHideMission".. 里面

我创建了创建图表的函数

createTimelineChart(mission){
let chart = am4core.create("chartdiv", am4charts.XYChart);
...

}

我将函数 showMission 更改为：

showMission(mission) {
      this.scrollUp();
      this.mission = mission;
      if (this.showHideMission === false) {
            this.showHideMission = true;
      }

      this.showHideCreateMission = false;
      this.showHideEditMission = false;
      this.createTimelineChart(mission); <---ADDED THIS LINE
  }

然后，当我打开一个任务时，我得到了这个错误：

html container not found
core.js:1673 ERROR Error: html container not found
    at createChild (Instance.js:129)
    at Module.create (Instance.js:172)
    at MissionComponent.push../src/app/mission/mission.component.ts.MissionComponent.createTimelineChart (mission.component.ts:203)
    at Object.eval [as updateDirectives] (MissionComponent.ngfactory.js:8278)
    at Object.updateDirectives (core.js:10798)
    at checkAndUpdateView (core.js:10451)
    at callViewAction (core.js:10692)
    at execEmbeddedViewsAction (core.js:10655)
    at checkAndUpdateView (core.js:10452)
    at callViewAction (core.js:10692)

但是如果我打开第二个任务，它会显示图表而没有任何错误（因为 <div id="chartdiv".. 已经显示），所以这里真正的问题是它首先找不到 div，虽然我'将showHideMission设置为true后调用函数创建图表

Answer 1

我遇到了同样的问题，并为这些函数使用了箭头函数。它为我解决了 componentDidUpdate = () => {}