Angular 4 中的情节没有找到带有 ngIf 的 HTML 元素

debugcn 发表于 Dev

泥

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

所以我想要做的是：我有一个 div，其中图形已初始化。这是第一次工作。我也有一些过滤器可以正常工作。但是我做了一个按钮来切换视图，而不是显示图形，我想显示带有图形值的表格。当我将视图切换回图形时，我得到无法找到 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>

君特·佐希鲍尔

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*/
    }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。