承诺完成后，Angular不会更新UI

问题描述

我提供以下服务：

@Injectable({ providedIn: 'root' })
export class ContextService {

  contextSubject = new ReplaySubject<ContextModel>(1);

  context: ContextModel = {};

  setContext(context: ContextModel) {
    console.log('contest service set context');
    console.dir(context);
    this.context = context;
    this.contextSubject.next(this.context);
  }

  public get contextObservable(): Observable<ContextModel> {
    return this.contextSubject.asObservable();
  }
}

我已将此服务注入组件中，并且正在订阅它。

  async ngOnInit() {

    this.contextService.contextObservable.pipe(takeuntil(this.subDestroy)).subscribe(async () => {
      await this.loadData();
    });

  }

  ...

  async loadData() {
    this.loading = true;

    await this.dataSource.query();

    this.loading = false;

    setTimeout(() => { this.cd.detectChanges(); },500);
  }

调用角材料数据源方法：

  async query():Promise<void> {
...
    let result = await this.inventoryService.query(skip,take,(item : InventoryItem) => { return this.filterFunc(item) },this.sort);
...
  }

依次调用返回一些伪数据的服务

  async query(skip = 0,take = 20,filters : (obj: InventoryItem) => boolean,sort : Sort) : Promise<PagedResult<InventoryItem>> {

    let p = new Promise<PagedResult<InventoryItem>>((resolve,reject) => {
      let res : PagedResult<InventoryItem> = {
        count: 1,items: [
          {
            id: '1',name: 'a',quantity: 123,rarity: 'b',subtype: 'c',type: 'd'
          }
        ],};

      setTimeout(() => {
        resolve(res);
      },1000);
    });

    return p;
  }

然后从某处执行以下操作：

    this.contextService.setContext({ ... });

我的问题如下：在第一页加载时，一切都很好。之后，如果我不调用cd.detectChanges()，则UI会一直保持加载状态，或者直到我单击表单元素（例如输入）。

我不知道是否有以下问题：使用角度元素将顶层组件导出为Web组件。我使用的是角材，页面上有角材表和进度条。

编辑：实际上，我必须使用setTimeout(() => { this.cd.detectChanges(); },500);才能使其正常工作。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angular angular-changedetection es6-promise