这个问题在这里已有答案:
我是Angular的新手,面对这个问题。
我想检查变量elementRef
的值,如果在显示数据之前它是空的,因为我想显示图表。这是我的代码:
component.ts
@ViewChild('normalDeviasiDaily', {read: ElementRef}) normalDeviasiDaily: ElementRef;
component.html
<div *ngIf="normalDeviasiDaily">
<div #normalDeviasiDaily id="normalDeviasiDaily">
<canvas style="width:100%; height:400px;"></canvas>
</div>
</div>
<div *ngIf="!normalDeviasiDaily">
<skeleton-item height="400px"></skeleton-item>
</div>
我的问题是cannot read property nativeElement of undefined
,有其他人经历过这个,请帮助我。
谢谢。
您正面临这个问题,因为*ngIf
指令在条件变为true
之前不会创建DOM元素。
因此,而不是使用*ngIf
使用HTML的hidden
属性,它将创建DOM元素但在条件false
之前不会向用户显示
<div [hidden]="!normalDeviasiDaily">
<div #normalDeviasiDaily id="normalDeviasiDaily">
<canvas style="width:100%; height:400px;"></canvas>
</div>
</div>
<div [hidden]="normalDeviasiDaily">
<skeleton-item height="400px"></skeleton-item>
</div>
希望这会有所帮助!
如果图表为空,您要做的是显示骨架项。
所以你可以做的是,在没有加载数据时隐藏图形。比方说,在你的component.ts中有一个名为chartData的变量,用于存储图表数据。此变量是异步变量,因为图表数据会动态加载到该变量中。
试试这个,
<div [hidden]="chartData">
<div #normalDeviasiDaily id="normalDeviasiDaily">
<canvas style="width:100%; height:400px;"></canvas>
</div>
</div>
<div *ngIf="!chartData">
<skeleton-item height="400px"></skeleton-item>
</div>