loginError的值需要花费一些时间才能更新ts文件

Question

当我输入错误的电子邮件和密码并单击“提交”时，组件ts文件中的this.LoginError应该在控制台中返回true，但在最初和单击{{1 }}只有2至3倍，然后值将更新为false。

我已在服务文件中注释了行submit，现在取消注释该文件中的true实际上会立即打印正确的值，但我仍然不知道为什么它不更新组件ts中的值立即归档。因此，在html中，使用“登录错误”仅在单击按钮两次后才会显示。

// console.log(this.loginErr)

服务文件

console.log

Answer 1

工作正常。只需注意服务中的以下两行即可。

checkStatus = new BehaviorSubject<boolean>(false);
isUserLoggedIn = this.checkStatus.asObservable();

您正在使用false初始化checkStatus BehaviorSubject。然后通过asObservable属性isUserLoggedIn公开它，这就是您在组件中订阅的内容。

因此，在subscribe内部运行下一个回调时，它会收到错误的消息。

现在，只要您通过在其上调用checkStatus方法将新值推入BehaviorSubject next，该值就会被向下推到isUserLoggedIn {{ 1}}流。届时，您的组件将收到更新的值。

由于您服务中的Observable调用而发生了这种滞后，这将进行异步网络调用，并且一旦调用堆栈为空，浏览器将执行其上的this.http.post(this.loginUrl, user)块。这就是异步代码在浏览器中的工作方式。