Angular @ViewChild错误'无法读取未定义的属性nativeElement“[重复]

问题描述 投票:2回答:2

这个问题在这里已有答案:

我是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,有其他人经历过这个,请帮助我。

谢谢。

angular ionic-framework angular5
2个回答
6
投票

您正面临这个问题,因为*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>

希望这会有所帮助!


0
投票

如果图表为空,您要做的是显示骨架项。

所以你可以做的是,在没有加载数据时隐藏图形。比方说,在你的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>
© www.soinside.com 2019 - 2024. All rights reserved.