javascript - 为什么这个错误/错误出现在 Angular 上

Question

我正在使用后端和 python - flask 为前端创建一个 Angular 项目，但是，在上次我尝试使数据库出现时，控制台显示错误...但是页面更新正确。以下是代码示例。

这是显示错误但仍显示正确数据的地方。

 <div class=" w3-half" layout="column">
<div id="chartContainer2"  style="margin-top:2%; height: 100%; width: 100%;">

    <h3 class="titulo">YOUR TIME BANK: {{grafico.horas_aluno}}</h3>

    <div style="display: block;">
      <canvas baseChart
                  [data]="doughnutChartData2"
                  [labels]="doughnutChartLabels2"
                  [colors]="colors2"
                  [chartType]="doughnutChartType2"
                  [legend]="doughnutchartDisplay2"
                  (chartHover)="chartHovered2($event)"
                  (chartClick)="chartClicked2($event)"></canvas>
    </div>
</div>

这是调用所指的 typescript

import { Component, OnInit, NgModule } from '@angular/core';
import { GoogleChartsModule } from 'angular-google-charts';
import { HttpClient } from '@angular/common/http';


@Component({
  selector: 'app-pagina',
  templateUrl: './pagina.component.html',
  styleUrls: ['./pagina.component.css']
})
@NgModule({
  declarations: [PaginaComponent],
  imports: [GoogleChartsModule.forRoot(),],
  bootstrap: [PaginaComponent],
})


export class PaginaComponent implements OnInit {


  serverData: JSON;
  employeeData: JSON;


  constructor(private http: HttpClient) { }


  alunos:any;
  grafico:JSON;
  ngOnInit() {
    this.http.get('http://127.0.0.1:5002/222222').subscribe(dados => { 
      console.log(dados)
      this.alunos = [dados as JSON];
    })

    this.http.get('http://127.0.0.1:5002/chart/222222').subscribe(dados => { 
      console.log(dados)
      this.grafico = dados as JSON;
    })

  }


  public doughnutChartLabels2:string[] = ['Total time', 'Remaining time', 'Missing time'];
  public colors2 = [{
    backgroundColor: ['rgba(17, 168, 0, 1)','rgba(189, 0, 0, 1)', 'rgba(0, 72, 240, 1)'],
    fillColor: 'rgba(47, 132, 71, 0.8)',
    strokeColor: 'rgba(47, 132, 71, 0.8)',
    highlightFill: 'rgba(47, 132, 71, 0.8)',
    highlightStroke: 'rgba(47, 132, 71, 0.8)'
}];





  public doughnutChartData2:number[] = [3,45,1];
  public doughnutchartDisplay2 = false;
  public titleChart2 = [{display:true}];
  public doughnutChartType2:string = 'doughnut';

  // events
  public chartClicked2(e:any):void {
    console.log(e);
  }

  public chartHovered2(e:any):void {
    console.log(e);
  }

}

这是控制台上显示的错误:ERROR TypeError: "_co.grafico is undefined"

Answer 1

当数据从 api 调用异步加载时，尝试使用安全导航运算符

<h3 class="titulo">YOUR TIME BANK: {{grafico?.horas_aluno}}</h3>