Javascript Plotly在Angular 4中未使用ngIf查找HTML元素

我正在构建一个需要图形的angular 4应用程序。 对于我正在使用的图形

Plotly.js

，除了我使用

ngIf

之外，这一切都是正常的

所以我想做的是： 我有一个div，它初始化了图形。这是第一次工作。我也有一些过滤器工作得很好。但是我做了一个按钮来切换视图，而不是显示一个图形，我想显示一个带有图形值的表。当我将视图切换回图形时，我得到一个错误，即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>

切换视图

从“@angular/core”导入{ChangeDetectorRef}；
构造函数（私有cdRef:ChangeDetectorRef）{}
switchView（）{
this.graph=！this.graph；
this.cdRef.detectChanges（）；//Angular很可能没有检测到更改并插入图形
div
。我认为最干净的解决方案是创建一个组件，该组件接受数据作为输入并打印它。然后，您可以使用
*ngIf
或CSS显示/隐藏它。您也可以手动触发更改检测，但我不能保证它会发生fore plot函数名为.hi@fangio，根据这个问题（），我正在尝试将plotly.js与Angular 4一起使用。您能与我们分享一下如何使用plotly.js吗？谢谢。
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*/
    }
}