Angular @ViewChild 错误 'Cannot read property nativeElement of undefined"

<分区>

我是 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>

我的问题是无法读取 undefined 的 nativeElement 属性，有没有其他人遇到过这种情况，请帮助我。

谢谢。

最佳答案

您遇到此问题是因为 *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>

希望这会有所帮助!

关于 Angular @ViewChild 错误 'Cannot read property nativeElement of undefined"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55155355/

上一篇：angular - 如何在 Angular 7 中为 formControl 设置动态值

下一篇：css - 带 ngFor 的 ionic 4 水平滚动

angular - 如何更改 ngfor 内各个元素的类？

javascript - 如何摆脱 Ionic/Cordova 模拟器中的 Facebook 警告？

typescript - Angular-tree-component 如何通过复选框选择来捕获选中的节点

angular - 是否有一个生命周期钩子(Hook)在组件初始化后运行一次，也在加载双向绑定(bind)后运行一次？

angular - 如何根据表单中的值或无值禁用 Angular 按钮

angular - Ion-slides 不更新动态数据

angular - Ionic 4 Slider 自动播放

javascript - 以 Angular react 形式显示条件输入框

angular - 在 Angular 中加载 App 组件以外的另一个组件