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 指令在条件变为 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>

希望这会有所帮助！

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”

Angular @ViewChild Error 'Cannot read property nativeElement of undefined"

ionic-framework

angular

angular5

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

Angular @ViewChild Error 'Cannot read property nativeElement of undefined"

ionic-framework

angular

angular5

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