Angular / Typescript - 无法更新订阅函数中的外部变量答案

【问题标题】：Angular / Typescript - Could not update outside variable in the subscribe functionAngular / Typescript - 无法更新订阅函数中的外部变量
【发布时间】：2021-05-10 22:44:38
【问题描述】：

下面是我的代码，我只想查询后端是否已经注册了电子邮件，但是，无论我将什么电子邮件传递给 verifyEmail 函数，“已注册”变量始终为假，我该如何更新已注册的变量根据后端响应？谢谢

export class MyClass {

   registered: boolean = false;
   message: string = ''

   verifyEmail(email) { 
        this.registered= false
        
        let verifyEmailUrl = "/backend/GetUserByEmail";
        this.http.post(verifyEmailUrl, {
            email: email
        }).subscribe(
            (data) => {
                if (data["user"]) { // can find a user
                    this.message = 'This email has already been registered'
                    this.registered= true
                }
            });
}

【问题讨论】：

您确定您的subscribe 块中的if 语句正在执行吗？
console.log(data);...这是什么样的？
@HarleyThomas 是的，如果语句有效，并且数据正确返回，我只是无法更新订阅块之外的注册变量。 tks
你能上传整个.ts代码吗？
@CaiJiaJun - 你的意思是视图没有更新吗？如果是这样，那是因为您需要致电detectChanges。它不会在订阅函数“外部”更新，因为它是 async，您可能正在检查它是否同步更新。

标签： javascript angular typescript web frontend

【解决方案1】：

您正在使用箭头函数，您的范围应该是共享的，this.registered 应该适当更新。请提供console.log 的数据或更相关的代码。您的问题似乎无法识别该问题。

【讨论】：

【解决方案2】：

如何查看注册值？您无法在执行 verifyEmail 后立即获取此值，因为值会在一段时间后更新。您可以创建 BehaviorSubject 然后订阅它并在它更新时在任何地方获取注册值

export class MyClass {

   registered$ = new BehaviorSubject<boolean>();
   message: string = ''

   verifyEmail(email) {             
        let verifyEmailUrl = "/backend/GetUserByEmail";
        this.http.post(verifyEmailUrl, {
            email: email
        }).subscribe(
            (data) => {
                if (data["user"]) { // can find a user
                    this.message = 'This email has already been registered'
                    this.registered$.next(true)
                } else {
                    this.registered$.next(false)
                }

            });
}

在外部代码中：

myClassObject.registered$.asObservable().subscribe(registered => console.log(registered));

【讨论】：