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

在组件的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

再次呼叫观察者似乎不起作用

1 个答案: