Working on an Angular project where data is fetched from various services and used for calculations. The processed data is then displayed in a component utilizing the Syncfusion Grid Component. However, there seems to be an issue where the data loads during the ngOnInit lifecycle hook but does not immediately appear on the page. Oddly enough, clicking anywhere on the screen triggers the data to finally display. Struggling to find a solution to this problem, any suggestions?
<ejs-grid #grid id='grid'[rowHeight]='30' (rowDataBound)="rowDataBound($event)" [dataSource]='XXX$ | async' [editSettings]='editSettings' (cellSaved)="dataChanged($event)" height="300px" style="color: red;">
<e-columns>
<e-column field='x1' [visible]="check[0]" headerText='x1' textAlign='center' width=120></e-column>
<e-column field='x2' [visible]="check[1]" headerText='x2' textAlign='center' width=120></e-column>
<e-column field='x3' [visible]="check[2]" headerText='x3' textAlign='center' width=120></e-column>
</e-columns>
</ejs-grid>
Implemented binding of dataSource property with an observable, passing data into this observable from an array using the "of()" method.
XXX$!: Observable<XModel[]>;
this.XXX$= of(YYY);