Angular应用程序的component.html中未提取来自component.ts的数据

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>

使用Chrome工具调试时出现此错误

Answer 1

当然，在组件尝试呈现图表后，便会获取数据， 您可以添加一个简单的**** ngIf ***指令来检查 pieChartDate 是否可用

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

Answer 2

angular告诉您它不知道“数据”，这可能与不使用npm安装插件有关。或者，如果您确实共享了app.module.ts，以便我们查看您在哪里出错。尽管如果您使用延迟加载，请记住将.forRoot()放在已安装的导入文件之后！