Angular2绑定无法使用Observable

调用接收凭据并检索用户的Rest服务。正在执行 HTTP方法不错，但用户对象不被更新，并且我不能其绑定到视图：Angular2绑定无法使用Observable

用户服务（连接到休息服务）：

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

    } 

    public loginService(credential:Credentials):Observable<User> 
    { 

     let headers = new Headers({ 'Content-Type': 'application/json' }); 
     let options = new RequestOptions({ headers: headers }); 

     return this.http.post 
     ("http://localhost:8090/Users/"+credential.username, JSON.stringify(credential),options) 
     .map((res) => res.json().user) 
     .catch((error:any) => Observable.throw(error.json().error || 'Server error')); 
    }; 
}

查看TS（持有用户对象，凭证和调用服务）：

export class LoginComponent { 
credentials = new Credentials(); 
private user: User; 

private anyErrors: boolean; 
private finished: boolean; 

constructor(private userService: UserService) { } 

login(){ 

this.userService.loginService(this.credentials).subscribe(
    function(response) {this.user = response ; console.log("Response from 
    service 1" + JSON.stringify(response))}, 
    function(error) { console.log("Error happened" + error)}, 
    function() { console.log("the subscription is completed")} 
       ); 
    console.log("Response from service 2" + JSON.stringify(this.user));

}

HTML模板：

Username: <input type="text" [(ngModel)]="credentials.username" name="login"> <br> 
    Password: <input type="text" [(ngModel)]="credentials.password" name="password" > <br> 
    {{user.username}} // <--- THIS NOT BEING UPDATED WHEN CLICK login 

<button (click)="login()">login</button> 


--------------------------------------------- 
User Model: 

export class User 
{ 
    name:string; 
    lastname:string; 
    address2:string; 
    email:string; 
    phone:string; 
    username:string; 
    password:string; 

    constructor() 
    { 

    } 
}

凭证型号

export class Credentials 
{ 
    username:string; 
    password:string; 

    constructor() 
    { 

    } 
}

控制台

角是在开发模式下运行。调用enableProdMode（）以启用生产模式。 login.component.ts：33服务2的响应{} login.component.ts：29服务1的响应{“name”：“edgargdl”，“lastname”：“flores”，“password”：“password” ，“email”：“[email protected]”，“phone”：“2107847131”，“contactPreference”：null，“username”：“edgargdl”，“links”：[]} login.component.ts：31订阅已完成

来源

2017-08-20 Edgar Flores

可以尝试登录的反应如何？ –

你正在使用一个函数，而不是一个箭头函数，并没有正确地绑定它，所以'this'不是你认为的那样。 – jonrsharpe

是的，这是我的问题，谢谢 –

不是你使用的语法的非常好的粉丝，你可以尝试一次。

this.userService.loginService(this.credentials).subscribe(
    (response) => this.user = response, 
    (error) => console.log("Error happened" + error), 
() => console.log("the subscription is completed"));

您使用的是function()语法参考this是无法访问。尝试使用lambda的

来源

2017-08-20 19:09:18

DV的任何理由表示赞赏？如果不是谢谢dv的人 –

哇，我认为它是相同但不同的格式，但似乎有更深层次的范围上的lambda表达式的意义。 –

非常感谢，修好了！ –

Angular2绑定无法使用Observable

回答

相关问题