display ng2 chart when the property of data returned is >=0

Question

I am using an ng2 chart library for drawing a doughnut chart and using an ngif with it:

<canvas *ngIf="products?.cost >= 0)" baseChart height="50" width="50"
    [data]="doughnutChartData"
    chartType="doughnut"
    [options]="chartOptions"
    [colors]="chartColors">
</canvas>

This gives me a strange error:

Cannot read property 'data' of undefined at BaseChartDirective.updateChartData (eval at (http://localhost:3000/app.js:4568:1), :90:23) at BaseChartDirective.ngOnChanges (eval at (http://localhost:3000/app.js:4568:1), :26:26) at Wrapper_BaseChartDirective.ngDoCheck (/ChartsModule/BaseChartDirective/wrapper.ngfactory.js:93:20)

I don't understand why!!

When my condition is like:

< canvas *ngIf="products?.cost > 0)" baseChart height="50" width="50"

(that is > instead of >=0), it works fine, but I need to draw chart even with =0 so I need the >= condition

When I do:

< canvas *ngIf="products && (products.cost >= 0)" baseChart height="50" width="50"

it works fine and solves my purpose. But, here, I have to put two conditions instead of one. Why does it fail with that error when I put single condition as explained above? Is there a way I can get the chart working when product.cost >=0 with one single ngif condition?

Answer 1

Please try this

<canvas *ngIf="products" baseChart height="50" width="50"
    [data]="doughnutChartData"
    chartType="doughnut"
    [options]="chartOptions"
    [colors]="chartColors">
</canvas>