Angular2 绑定不适用于 Observable

埃德加弗洛雷斯

调用接收凭据并检索用户的 Rest 服务。HTTP 方法正在正常执行,但 User 对象未更新,我无法将其绑定到视图:

用户服务(连接到休息服务):

@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(持有 User 对象、凭据并调用服务):

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()
    {

    }
}

安慰

Angular 在开发模式下运行。调用 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 订阅是完全的

拉胡尔·辛格

不是您正在使用的语法的忠实粉丝,您可以尝试一次。

  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 的

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Angular CORS适用于GET,但不适用于DELETE

来自分类Dev

Angular2 useAsDefault不适用于子路由

来自分类Dev

ngStyle不适用于angular2中的!important

来自分类Dev

jQuery Xeditable不适用于Angular2

来自分类Dev

Highlight.js不适用于Angular 2

来自分类Dev

angular2 canActivate()不适用于Observable响应

来自分类Dev

将自定义指令绑定到Angular2中的Observable

来自分类Dev

SQLite不适用于Ionic 2

来自分类Dev

<div [innerHTML] = ....在angular2 html注入中不适用于iframe html>

来自分类Dev

Angular2绑定不适用于Google OAuth2 Promise

来自分类Dev

Rxjs筛选器运算符不适用于Angular2 Observable

来自分类Dev

Ionic 5手势不适用于Angular绑定

来自分类Dev

Angular 2 Bulma变量不适用于ngClass属性

来自分类Dev

绑定不适用于Angular.js和Firebase简单登录

来自分类Dev

ngAnimate不适用于Angular 1.2.16

来自分类Dev

WebAPI2模型绑定不适用于HTTP PUT

来自分类Dev

模型绑定不适用于angular2中的select

来自分类Dev

SQLite不适用于Ionic 2

来自分类Dev

Ng2-table不适用于最新的Angular2版本

来自分类Dev

Angular2管道不适用于输入

来自分类Dev

Angular的绑定不适用于指令中添加的元素

来自分类Dev

Angular代码不适用于Express

来自分类Dev

Node.js核心模块fs不适用于webpack和angular2 cli

来自分类Dev

CORS Cookie可用于获取请求,但不适用于Angular2中的发布

来自分类Dev

为什么带有输入类型文本的日期管道不适用于angular2?

来自分类Dev

Angular 2 不适用于 Bootstrap 3 或 4

来自分类Dev

Angular [class] 绑定不适用于组件初始化

来自分类Dev

titlecase 管道不适用于三元运算符 angular2

来自分类Dev

Angular Guard canActivate 方法不适用于 Observable<boolean>

Related 相关文章

热门标签

归档