CODEWITHSUNDEEP
angularsubscribe
Jayashree
Jayashree

Reputation: 825

Data from component.ts is not fetched in component.html in angular application

I have written a simple angular application that will get fetch the data from REST Api and plot the Pie Chart. In my app.component.ts file I am getting data like this

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

In my app.component.html file I am plotting pie chart based on the data

<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 am getting this error when debugging using Chrome tools enter image description here

Upvotes: 0

Views: 590

Answers (2)

Zouhair Ettouhami
Zouhair Ettouhami

Reputation: 226

Surely the Data is fetched after the component tries to render the Chart, you can add a simple ****ngIf*** directive to check if the pieChartDate is available

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

Upvotes: 1

abrsh
abrsh

Reputation: 525

angular is telling u that it doesnt know "data" its probably related to not installing the plugin using npm. Or if u do share the app.module.ts so that we see where you made mistake. Although if you use lazy loading remember to put .forRoot() after your installed import!

Upvotes: 0

Related Questions