почему эта ошибка / ошибка появляется на угловой

Question

Я создаю угловой проект для внешнего интерфейса с back и python-flask, но в последний раз, когда я пытался отобразить базу данных, консоль выдает ошибку ... однако страница обновляется правильно. Вот примеры кода.

здесь отображается ошибка, но все равно отображаются правильные данные.

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

и вот машинопись, на которую ссылается вызов

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>