Input property does not work within ngx-charts tem

2019-06-28 05:07发布

问题:

As per this answer I did come up with code below that works fine:

result: any;
ngOnInit() {
  this.result = getResult();
}

<ngx-charts-bar-vertical-stacked
    *ngIf="(result | async) as results"
    [results]="results"
>
</ngx-charts-bar-vertical-stacked>

Now I want to pass result as an input parameter:

@Input() result: any;

<ngx-charts-bar-vertical-stacked
    *ngIf="(result| async) as results"
    [results]="results"
>
</ngx-charts-bar-vertical-stacked>

but it is just does not work this way, the chart just does not get displayed also I can't see any errors in console. However I come up with the trick by assigning input value to another component property I declared:

data: any;
@Input() result: any;

ngOnInit() {
  this.data = this.result;
}

<ngx-charts-bar-vertical-stacked
    *ngIf="(data| async) as results"
    [results]="results"
>
</ngx-charts-bar-vertical-stacked>

So this way it works but I wonder how would you do it properly without introducing new variables and doing hacks like this.data = this.result;