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

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;

这就是我如何检索它的可观察量：

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

在我的组件中，我将此可观察量移植到新属性

//In the component class
Calculating$: Observable<boolean>;
//in ngOnInit
this.Calculating$ = this._calculateService.Calculating$;

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

Calculating: {{Calculating$ | async}}

当我测试代码时，初始化未设置计算(空字符串(。当我单击该按钮时，我看到"计算"变为 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