component.ts中的数据未在angular应用程序的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>

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

Answer 1

当组件尝试渲染图表时，确实会获取数据，您可以添加一个简单的**** ngIf ***指令来检查pieChartDate是否可用

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

Answer 2

angular告诉你它不知道“数据”它可能与不使用npm安装插件有关。或者，如果您确实共享app.module.ts，以便我们看到您犯了错误。虽然如果您使用延迟加载，请记住在安装导入后放置.forRoot()！