Angular 项目在从服务获取数据后需要清空点击以更新屏幕

Question

Angular 项目从某些服务获取数据并使用此数据进行一些计算，然后显示在组件（使用 Syncfusion 的网格组件）。当涉及到 ngOnInit 时，数据已加载但没有出现 在页面上。每当我点击屏幕上的某个地方时，它都会在页面上显示数据。我无法处理，有什么建议吗？

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

使用 observable 绑定数据源属性并将数据从数组 传递到这个 observable “of()” 标签

XXX$!: Observable<XModel[]>;

this.XXX$= of(YYY);

Answer 1

用 changeDetectionRef.detectChanges() 解决。

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

从导入中添加到构造函数中，

constructor(private ref: ChangeDetectorRef){}

在需要的地方调用 detectChanges()

this.ref.detectChanges();

Angular 项目在从服务获取数据后需要清空点击以更新屏幕

Angular project needs to empty click to update screen after getting data from service

angular

typescript

observable

syncfusion

ej2-syncfusion