用于在Angular中重新渲染视图模板的可观察到的等待和setTimeout

Question

我有用于排序数据的本地存储，这可能需要一段时间：

private store: IBacktest[] = [];

public setStore(content: string): Observable<void> {
    return new Observable<void>((observer) => {
            this.store = content
                .trim()
                .split('\n')
                .map(item => toTestCase(item))
                .sort((a, b) => b.profitToDropDown - a.profitToDropDown);
            observer.next();
            observer.complete();
        }
    );
}

元素的数量5000-10000，由于toTestCase而获得10-30秒，这不是一个便宜的操作。我想为加载程序提供一个更加用户友好的界面：

this.isLoader = true;
this.backtestService
    .setStore(content)
    .pipe(finalize(() => {
        this.isLoader = false;
    }))
    .subscribe(() => {...});

和模板中的<app-loading-overlay *ngIf="isLoader"></app-loading-overlay>。

但是，当我在调试模式下看到isLoader = true时，它不会显示加载叠加图。

但是当我尝试使用setTimeout()来测试其逻辑时：setTimeout(() => { this.isLoader = false; }, 100000)都可以正常工作并且加载程序可见。

我的可观察用法有什么问题，以及如何在没有setTimeout()或类似拐杖之类的多余包装的情况下解决此问题？

Answer 1

我认为这里的问题是isLoader没有更新DOM中的值。