Angular Observables从订阅中更改本地函数变量onSuccess => {}

时间:2017-10-07 04:08:54

标签: angular http this observable

所以我在订阅observable之后尝试从成功函数回调中改变变量'success'。我在为其编写测试后使用Chrome调试器进行了调试,并且在成功发布POST时无法返回true。

测试进入响应=> {}函数但是在单步执行“success = true”之后,它仍然是错误的。因为我将为各种其他函数执行此操作,所以我希望有一个很长的类变量列表,以便用“this”来引用它们,就像我在其他各种示例中看到的那样。有没有办法让成功成真?

public login(username: string, password: string): boolean {
  let success = false;

  this.http.post<LoginResponse>('/api/login_check', {username: username, password: password}).subscribe(
    response => {
      success          = true;
      this.currentUser = new User(response.user);
      sessionStorage.setItem('userJWT', response.token);
    },
    error => {
      console.log('Login failed - ' + error);
    }
  );

  return success;
}

1 个答案:

答案 0 :(得分:0)

您无法混合同步和异步函数来获取结果。

一旦你调用任何异步,你需要等待它,因为它将发生在线程之外。

这将起作用,例如

<强> UserService

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';

import { Observable } from 'rxjs/Observable';

@Injectable()
export class UserService {
    constructor(private http: Http) { }

    login(username: string, password: string): Observable {
        return this.http.post('/api/authenticate', JSON.stringify({ username: username, password: password }))
            .map((response: Response) => {
                if (response.status === 200) {
                    return response.json();
                }
                else {
                    throw new Error('Bad login!');
                }
            });
    }
}

您组件中的其他位置

@Component({
    templateUrl: 'login.component.html'
})
export class LoginComponent {
    login() {
        this.userService.login(this.model.username, this.model.password)
            .subscribe(
                data => {
                    this.router.navigate([this.returnUrl]);
                },
                error => {
                    this.alertService.error(error);
                });
    }
}