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指令在条件变为true之前不会创建DOM元素，因此您面临此问题。

因此，不是使用HTML的*ngIf，而是使用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>

希望这会有所帮助！

Answer 2

您想要做的是，如果图表为空，则显示框架项目。

因此，您可以做的是在未加载数据时隐藏图形。假设您的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>

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

2 个答案: