我如何将从 http.post 返回的简单字符串值设置为 Angular5 中的变量

Question

我想使用 http.post 从我的 Restful 网络服务获取令牌。 Web 服务需要一个用户名和密码，如果参数与数据库中的任何用户匹配，它会创建一个令牌并将 return 作为字符串。我可以发送 post 并将值作为 JSON 但我想将其作为字符串。我想用它作为变量。而且我想清楚地了解 http 和 rest 服务通信，如果有人可以建议一个来源，那对我来说非常好。提前致谢...

我可以接受它，但我想把它作为一个变量或 class 中的一个变量界面：

export interface Token {
    token: string
}

auth.service.ts :

login (username: string, password: string): Observable<Token[]> {
      this.params = '?username=' + username + '&password=' + password;
      return this.http.post<Token[]>(this.loginURL + this.params, null, httpOptions).do(data => console.log(data));
  }

login.component.ts :

this.authService.login(this.username, this.password).subscribe(data => this.authService.token = data[0]);

更新和工作

我在@SrAxi 的帮助下解决了这个问题。最终正确代码；

我的 login.component.ts :

this.authService.login(this.username, this.password).subscribe(
            (data: string) => this.authService.token.token = data,
            (error: any) => console.error(error.message, error.details),() => console.log(this.authService.token.token)
        );

我的auth.service.ts：

 login(username: string, password: string): Observable<string> {
        this.params = '?username=' + username + '&password=' + password;
        return this.http.post(this.loginURL + this.params, null, httpOptions)
            .map((response: Token) => response.token) // we navigate in the repsonse directly and fish out the token and return it
            .catch((error: any) => Observable.throw(error));
    }

我的对象class：

export class Token {
    private _token: string;


    get token(): string {
        return this._token;
    }

    set token(value: string) {
        this._token = value;
    }
}

Answer 1

您没有映射来自您的 Http 调用的响应。

login(username: string, password: string): Observable<string> {
    this.params = '?username=' + username + '&password=' + password;
    return this.http.post(this.loginURL + this.params, null, httpOptions)
      .map((response: any) => response.json().token) // we navigate in the repsonse directly and fish out the token and return it
      .catch((error: any) => Observable.throw(error));
  }

使用这个重新设计的函数，您将能够映射响应并将其解析为 JSON 或者抛出您的订阅将捕获的错误。

所以你可以这样称呼它：

this.authService.login(this.username, this.password).subscribe(
      (data: any) => this.authService.token = data[0],
      (error: any) => console.error(error.message, error.details)
    );

Answer 2

在您的 auth-service 中执行以下操作

login (username: string, password: string): Observable<Token> {
  this.params = '?username=' + username + '&password=' + password;
  return this.http.post(this.loginURL + this.params, null, httpOptions).map((res: Token) => res);
  }

然后在你的login-component

    ...
    token: Token = null;
    this.authService.login(this.username, this.password)
   .subscribe(token => this.token = token);
    ...

我如何将从 http.post 返回的简单字符串值设置为 Angular5 中的变量

How can i set a simple string value returned from http.post to a variable in Angular5

resteasy

angular

angular5