错误类型错误：无法读取 Ionic 5 和 chart.js 中未定义的属性“nativeElement”

Question

我想在我的 ionic 5 应用中绘制条形图。我使用如下代码。但是当我按下按钮drawDaysSummary()时总是得到一个错误ERROR TypeError: Cannot read property 'nativeElement'

我发现使用*ngIf (<ion-card *ngIf="drawDay == true">) 时会发生错误。如果改用<ion-card>，图表绘制效果很好。

我整天搜索解决方案，但无法解决问题。你能帮忙吗？

home.html

     <ion-content> 
      <ion-button expand="full" (click)="drawDaysSummary();" > Draw</ion-button>

      <ion-card *ngIf="drawDay == true">
        <ion-card-header>
          Bar Chart
        </ion-card-header>
        <ion-card-content>
          <canvas #barCanvas ></canvas>
        </ion-card-content>
      </ion-card>
     </ion-content>

home.ts

    import { Component, OnInit, ViewChild, NgZone, ElementRef  } from '@angular/core';
    import * as Chart from 'chart.js';
    
    export class ItemHistoryPage implements OnInit {
      private barChart: Chart;
      @ViewChild('barCanvas', {static: true}) barCanvas: ElementRef;
    
      constructor(){
      }
    
      drawDaysSummary(){
        this.barChart = new Chart(this.barCanvas.nativeElement, {
    
          type: 'bar',
          data: {
            labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
            datasets: [{
              label: '# of Votes',
              data: [12, 19, 3, 5, 2, 3],
              backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
              ],
              borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
              ],
              borderWidth: 1
            }]
          }
    
        });
      }

我的角度版本信息是：

    "@angular/common": "~11.2.0",
    "@angular/core": "~11.2.0",
    "@angular/fire": "^6.1.4",
    "@angular/flex-layout": "^2.0.0-beta.12",
    "@angular/forms": "~11.2.0",
    "@angular/platform-browser": "~11.2.0",
    "@angular/platform-browser-dynamic": "~11.2.0",
    "@angular/router": "~11.2.0",
    "@ionic/angular": "^5.5.2",
    "@ionic/pwa-elements": "^3.0.2",
    "@ionic/storage": "^2.3.1",
    "@ionic/storage-angular": "^3.0.6",
    "@ngx-translate/core": "^13.0.0",
    "@ngx-translate/http-loader": "^6.0.0",
    "@types/google-maps": "^3.2.2",
    "angularfire2": "^5.4.2",

    "@angular-devkit/build-angular": "~0.1102.4",
    "@angular/cli": "~11.2.4",
    "@angular/compiler": "~11.2.0",
    "@angular/compiler-cli": "~11.2.0",
    "@angular/language-service": "~11.2.0",
    "@ionic/angular-toolkit": "^3.1.1",

Answer 1

如果没有对 StackBlitz 进行适当的重新创建，就很难调试。但您在模板中引用的 drawDay 变量似乎在您的 TypeScript 文件中不存在。

类似地，当切换像这样的条件渲染元素时，DOM 实际上必须在您使用 @ViewChild 注释引用的元素可用之前赶上。通常，您可以通过将代码包装在 setTimeout() 中来解决此问题，因为这会将代码推送到事件队列的后面（这意味着浏览器将首先呈现内容然后执行代码）。