第二次调用观察者下一个似乎不起作用

Question

我正在尝试模拟用户必须等待（当前模拟的）后端调用的等待时刻。当等待时刻出现时，我希望禁用按钮并显示一条消息。我尝试使用以下代码来实现这一点。

当一个按钮被点击时，这段代码在一个服务中被执行：

//Simulate waiting for backend
this.calculatingObserver.next(true);
console.log("disabled");
await (new Promise(resolve => setTimeout(resolve, 2000)));
this.calculatingObserver.next(false);
console.log("enabled");

这是在我看到控制台日志出现时执行的。

这是观察者的签名：

private calculatingObserver: Observer<boolean> = null;

这就是我为它检索 observable 的方式：

public get Calculating$(): Observable<boolean> {
    return new Observable((calculatingObserver: Observer<boolean>) => {
        this.calculatingObserver = calculatingObserver;
    });
}

在我的组件中，我将此 observable 移植到一个新属性

//In the component class
Calculating$: Observable<boolean>;

//in ngOnInit
this.Calculating$ = this._calculateService.Calculating$;

在组件的 html 中，我使用这样的属性进行测试：

Calculating: {{Calculating$ | async}}

当我测试代码时，最初没有设置计算​​（空字符串）。当我单击该按钮时，我看到 Calculating 更改为 true。但是，它永远不会变为假。所以看起来，在执行过程中出了点问题

this.calculatingObserver.next(false);

我不知道为什么。我在这里做错了什么，为什么计算没有变为假？

超时正在工作，因为在控制台中打印启用之前需要 2 秒。

Answer 1

我在堆栈闪电战中尝试了您的代码，并将您服务中的代码更改为：

this.calculatingObserver.next(true); console.log("disabled"); setTimeout(() => {this.calculatingObserver.next(false);console.log("enabled");}, 2000);

它似乎确实是这样工作的：https://stackblitz.com/edit/angular-2afnv9