1

Angular project that gets Data from some services and makes some calculation with this data, then it shows in a component (Using Grid Component of the Syncfusion). When it comes to ngOnInit, data is loaded but it doesn't appear on page. Whenever I click to somewhere on screen it shows the data on page. I couldn't handle it, 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>

Binding dataSource property with an observable and passing data into this observable from an array with "of()" tag

XXX$!: Observable<XModel[]>;

this.XXX$= of(YYY);
Mykyusuf
  • 39
  • 4
  • You'll want to add a bit more code, for instance the component using the `dataSource` attribute. – Aldin Bradaric Feb 01 '22 at 08:01
  • Is there a service with API call involved? Would be helpful to include its use in the example - it's more than likely a timing issue (people often use cd.detectChanges as a workaround), but it's best to fix the underlying problem – Drenai Feb 01 '22 at 08:32
  • I solved it with changeDetectionRef.detectChanges(), thanks for help – Mykyusuf Feb 01 '22 at 09:48

1 Answers1

2

Solved with changeDetectionRef.detectChanges().

import { ChangeDetectorRef } from '@angular/core';

Add into constructor from imports,

constructor(private ref: ChangeDetectorRef){}

Call detectChanges() where you need

this.ref.detectChanges();
Mykyusuf
  • 39
  • 4