在Angular 4中使用ngIf找不到HTML元素 [英] Plotly in Angular 4 not finding HTML element with ngIf
问题描述
我正在构建一个需要图形的角度4应用程序。
对于我正在使用的图 Plotly.js
,它可以正常工作,除非我使用 ngIf
。
所以我想要做的是:
我有一个div来初始化图。这是第一次。我也有一些过滤器工作得很好。但是我做了一个按钮来切换视图,而不是显示一个图表,我想用图表的值显示一个表格。当我将视图切换回图表时,我得到
所以这里是我的代码的一部分:
部分我的组件:
public graph:boolean;
$ b $ public draw():void {
/ *获取数据的代码* /
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 =graphclass =graph>< / div>
< / div>
< div * ngIf =!graph>
<! - 表格 - >
< / div>
< button class =btn btn-default btn-sm center-block btn-file(click)=switchView()>
< i class =fa fa-eye>< / i>
切换查看
< / button>
来自'@ angular / core'的ChangeDetectorRef};
构造函数(private cdRef:ChangeDetectorRef){}
switchView(){
this.graph =!this.graph;
this.cdRef.detectChanges(); //<<<确保绑定更新
if(this.graph){
this.draw();
} else {
/ * tableview * /
}
}
I am building an angular 4 App that needs a graph.
For graphs I am using Plotly.js
, this works as it should, except if I use ngIf
.
So what I want to do: I have a div in wich the graph is initialized.This works the first time. I also have some filters that work just fine.However I made a button to switch the view, instead of showing a graph I want to show a table with the values of the graph.When I switch the view back to graph,then i get the error that plotly cannot find the div.
So here are parts of my code:
Parts of my component:
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*/
}
}
Parts of my 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*/
}
}
这篇关于在Angular 4中使用ngIf找不到HTML元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!