Данные из component.ts не извлекаются в component.html в угловом приложении

Question

Я написал простое угловое приложение, которое получит данные из REST Api и построит круговую диаграмму.В моем файле app.component.ts я получаю такие данные

 this.satisfactionService.getGenderDetails().subscribe(result =>{ 

   this.Data=result;  

   console.log(this.Data)
   console.log(Object.keys(this.Data).length)
   console.log(this.Data.labels)
   console.log(this.Data.values) 

   this.flag=true;

   console.log(this.Data)

   if (typeof(this.Data) != "undefined") {   

     this.pieChartLabels = this.Data.labels;
     this.pieChartData=this.Data.values;
     this.pieChartType= 'pie';

     console.log(this.pieChartLabels )
     console.log(this.pieChartData)

     this.flag=false;
   }

 }, error => console.log(error)); 

В моем файле app.component.html я строю круговую диаграмму на основе данных

<div class="otherBox" >
  <div class="vamBox">
    <div style="text-align:center;">     
      <span>
        <p class="cardText">Distribution of Students Based on Gender</p>
      </span>
    </div>
  </div>
  <div class="vamInfoBox">
    <canvas baseChart height="100px"
      [data]="pieChartData"
      [labels]="pieChartLabels"
      [chartType]="pieChartType">
    </canvas>
  </div>
</div>

Iполучаю эту ошибку при отладке с помощью инструментов Chrome

Answer 1

Конечно, данные выбираются после того, как компонент пытается отобразить диаграмму, вы можете добавить простую директиву **** ngIf ***, чтобы проверить, доступна ли pieChartDate

<canvas *ngIf='pieChartData'></canvas>

Answer 2

angular говорит вам, что он не знает «данных», вероятно, это связано с не установкой плагина с использованием npm.Или, если вы поделитесь app.module.ts, чтобы мы увидели, где вы допустили ошибку.Хотя, если вы используете отложенную загрузку, не забудьте поставить .forRoot() после установленного импорта!