TypeError:无法读取未定义的属性“nativeElement”(Chart.js& Angular / Cordova)

时间:2017-11-06 10:22:46

标签: javascript angular cordova

我正试图在函数调用后绘制图表。我收到这个是一个错误:

TypeError: Cannot read property 'nativeElement' of undefined

以下是我的 HTML 文件:

<ion-content>

    <ng-template #guest>      
    <div>
      <button ion-button block (click)="auth.googleLogin()"><i class="fa fa-google"></i>   Connect Google</button>
      <button ion-button block (click)="auth.facebookLogin()"><i class="fa fa-facebook"></i>   Connect Facebook</button>
    </div>
    </ng-template>
    <ion-card>
      <ion-card-header>
        Bar Chart
      </ion-card-header>
      <ion-card-content>
        <canvas #barCanvas></canvas>
      </ion-card-content>
    </ion-card>
    </ng-template>

</ion-content> 

和我的 .TS 文件:

@Component({
  selector: 'page-drawingchart',
  templateUrl: 'drawingchart.html'
})

export class drawingChart{

  @ViewChild('barCanvas') barCanvas: ElementRef;

  barChart: any;

  constructor(public navCtrl: NavController, public auth: AuthService) 
  {

  }

  activateChart(objects)
  {
    this.barChart = new Chart(this.barCanvas.nativeElement,
      {
          type: 'bar',
          data: 
          {
              labels: [objects[0].year, objects[1].year, objects[2].year, objects[3].year],
              datasets: 
              [
                  {
                      label: Gender',
                      backgroundColor: 'rgba(255, 99, 132, 0.2)',
                      stack: 'Stack 0',
                      data: 
                      [
                          objects[0].gender,
                          objects[1].gender,
                          objects[2].gender,
                          objects[3].gender
                      ]
                  }, 
                  {
                      label: 'Age',
                      backgroundColor: 'rgba(54, 162, 235, 0.2)',
                      stack: 'Stack 0',
                      data: 
                      [
                          objects[0].age,
                          objects[1].age,
                          objects[2].age,
                          objects[3].age
                      ]
                  }
              ]
          }
      });
  }

} 

请注意,一旦用户登录并将信息发送到图表功能,就会从另一个类调用函数activateChart。 (对象正确到达)

谢谢!

0 个答案:

没有答案