Angular @ViewChild错误'无法读取未定义的属性nativeElement”

Question

我是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，有没有其他人遇到过，请帮助我。

谢谢。

Answer 1

由于*ngIf指令在条件变为之前不会创建DOM元素，因此您面临此问题true。

因此，与其*ngIf使用hiddenHTML 的use 属性，该属性将创建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>

希望这会有所帮助！