javascript - 在 Angular 4 中 Plotly 找不到带有 ngIf 的 HTML 元素

Question

我正在构建一个需要图形的 Angular 4 应用程序。对于我使用 Plotly.js 的图表，这可以正常工作，除非我使用 ngIf。

所以我想做的是:我有一个 div，其中图形已初始化。这是第一次工作。我也有一些过滤器工作得很好。但是我做了一个按钮来切换 View ，而不是显示图表我想显示一个包含图表值的表格。当我将 View 切换回图表时，我得到plotly 找不到 div 的错误。

下面是我的部分代码:

我的部分组件:

public graph:boolean;

public draw():void {
    /*code to get data to plot*/
    Plotly.newPlot('graph', this.drawing, layout, options);
}

switchView(){
    this.graph = !this.graph;
    if(this.graph){
      this.draw();
    } else {
      /*tableview*/
    }
}

我的部分 HTML

<div *ngIf="graph">
<div id="graph" class="graph"></div>
</div>

<div *ngIf="!graph">
  <!--Table -->
</div>


<button class="btn btn-default btn-sm center-block btn-file" (click)="switchView()">
  <i class="fa fa-eye"></i>
  Switch View
</button>

Answer 1

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdRef:ChangeDetectorRef){}

switchView(){
    this.graph = !this.graph;
    this.cdRef.detectChanges(); // <<< ensure the bindings are updated
    if(this.graph){
      this.draw();
    } else {
      /*tableview*/
    }
}