错误类型错误：无法读取未定义的属性（读取“nativeElement”）

Posted 2023-03-07

【中文标题】错误类型错误：无法读取未定义的属性（读取“nativeElement”）

【英文标题】：ERROR TypeError: Cannot read properties of undefined (reading 'nativeElement')

【发布时间】：2021-12-03 04:21:48

【问题描述】：

我最近将 package.json 中的依赖项升级到最新版本。依赖关系至少过时了 2 年或更长时间。我正在处理的站点显示各种图形和图表，并且在升级到 package.json 之前运行良好。这是什么原因？

这是更新后的 package.json

  "name": "pipeline-viewer",
  "version": "0.0.0",
  "scripts": 
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  ,
  "private": true,
  "dependencies": 
    "@angular/animations": "^12.0.0",
    "@angular/cdk": "^12.0.0",
    "@angular/common": "^12.0.0",
    "@angular/compiler": "^12.0.0",
    "@angular/core": "^12.0.0",
    "@angular/flex-layout": "^12.0.0-beta.35",
    "@angular/forms": "^12.0.0",
    "@angular/material": "^12.0.0",
    "@angular/material-moment-adapter": "^12.0.0",
    "@angular/platform-browser": "^12.0.0",
    "@angular/platform-browser-dynamic": "^12.0.0",
    "@angular/router": "^12.0.0",
    "@wizpanda/super-gif": "0.0.5",
    "angular-plotly.js": "^4.0.4",
    "bootstrap": "^5.1.3", 
    "moment": "^2.29.1",
    "plotly.js": "^2.5.1",
    "rxjs": "^7.4.0",
    "rxjs-compat": "^6.6.7",
    "zone.js": "^0.11.4"
  ,
  "devDependencies": 
    "@angular-devkit/build-angular": "^12.0.0",
    "@angular/cli": "^12.0.0",
    "@angular/compiler-cli": "^12.0.0"
  

这是显示图形和图表的旧 package.json。

  "name": "pipeline-viewer",
  "version": "0.0.0",
  "scripts": 
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  ,
  "private": true,
  "dependencies": 
    "@angular/animations": "^7.1.4",
    "@angular/cdk": "^7.3.7",
    "@angular/common": "~7.1.0",
    "@angular/compiler": "~7.1.0",
    "@angular/core": "~7.1.0",
    "@angular/flex-layout": "^7.0.0-beta.24",
    "@angular/forms": "~7.1.0",
    "@angular/material": "^7.3.3",
    "@angular/material-moment-adapter": "^8.1.2",
    "@angular/platform-browser": "~7.1.0",
    "@angular/platform-browser-dynamic": "~7.1.0",
    "@angular/router": "~7.1.0",
    "@wizpanda/super-gif": "0.0.5",
    "angular-plotly.js": "^1.3.2",
    "bootstrap": "^4.2.1",
    "moment": "^2.24.0",
    "plotly.js": "^1.49.0",
    "rxjs": "~6.3.3",
    "rxjs-compat": "^6.3.3",
    "zone.js": "~0.8.26"
  ,
  "devDependencies": 
    "@angular-devkit/build-angular": "~0.11.0",
    "@angular/cli": "~7.1.3",
    "@angular/compiler-cli": "~7.1.0"
  

【问题讨论】：

代码的哪一部分导致了这个问题？有时，某些 npm 包的新版本的行为与以前的版本完全不同，因此您需要自行调试源代码

在我使用 @angular/core 的 ElementRef 的代码中，似乎

使用 viewChild?

是的，没错！

检查我的答案可能会有所帮助

【参考方案1】：

它与Angular +8中的viewChild变化有关

改变

@ViewChild('element') element: ElementRef;

到

@ViewChild('element', static: true) element: ElementRef;
// to access your view Child in ngOnInit

ContentChild 也一样

【讨论】：

那么，如果我的元素是 navTable，替换会是这样吗？ @ViewChild('navTable', static: true) navTable: ElementRef;

是的！这是对的！

这行得通！谢谢法塔赫！