Angular 2 ngModel在restful调用后未更新

我有一个简单的用户组件，可以检索用户的名字和姓氏。当用户单击submit按钮时，它将进行restful调用，检索详细信息并传递回我的用户对象。然而，目前还没有发生这种情况，我也不确定出了什么问题

this.model = new User().fromJSON(user)[0];

当我在初始化期间手动启动模型时，表单将正确显示用户的数据。如果我从RESTAPI调用中检索并将值分配回表单，则表单不会被更新

this.model = new User().fromJSON(user)[0];

我已经验证了数据检索是否正确，我的诊断方法还显示模型正确映射了响应数据。我尝试了zone.run，但表单也没有更新

this.model = new User().fromJSON(user)[0];

更新 我发现原因是因为响应是一个对象数组。更改以下内容已解决此问题

this.model = new User().fromJSON(user)[0];

我不确定是否有办法确保我的服务总是返回一个JSON对象而不是一个对象数组

this.model = new User().fromJSON(user)[0];

userservice.ts

this.model = new User().fromJSON(user)[0];

 return this.http.post('http://ng2nodejs.azurewebsites.net/api/user', data , {
            headers: authHeader
        })
        .map((response: Response) => { return response.json()});

我的用户组件-尽管诊断正确显示数据

this.model = new User().fromJSON(user)[0];

{{diagnostic}}

<h1>User Form</h1>
<form (ngSubmit)="f.form.valid && getUser()" #f="ngForm" >                        
    <div class="form-group">
       <label for="firstname">First Name</label>
       <input type="text" id="firstname" [(ngModel)]="model.firstname" name="firstname" >
    </div>
    <div class="form-group">
       <label for="lastname">Last Name</label>
       <input type="text" id="lastname" [(ngModel)]="model.lastname" name="lastname" >
    </div>  

    <button>Submit</button>                
</form>

我的组件

this.model = new User().fromJSON(user)[0];

 import { Component, NgZone } from '@angular/core';
 import { User } from '../auth/user';
 import { UserService } from '../auth/user.service';

 @Component({
   moduleId: module.id,
   selector: 'app-first',
   templateUrl: './first.component.html',
   styleUrls: ['./first.component.css'],

 })
 export class FirstComponent {
     constructor(private userService: UserService, private zone:NgZone) { }  
     model =  new User();    
     getUser() {             
          this.userService
             .getUser('User123')
             .subscribe((user: Object) => {
                  this.zone.run(() => { 
                     this.model = new User().fromJSON(user);     
                  });  
             });
     }

     get diagnostic() { return JSON.stringify(this.model); }
 }

---

我不知道这是否解决了你的问题，但我想在此给出一些建议

this.model = new User().fromJSON(user)[0];

如果您确实没有理由使用类，我建议您转向接口：

this.model = new User().fromJSON(user)[0];

export interface User {
  username: string;      
  firstname: string;
  lastname: string; 
}

这里不需要NgZone

this.model = new User().fromJSON(user)[0];

export class FirstComponent {
  constructor(private userService: UserService) { }  
  model: User = {};   

  getUser() {             
    this.userService
      .getUser('User123')
      .subscribe((user: Object) => {
         this.model = user;
      });
  }
}

如果您可以控制API，为什么不在实际创建新用户时返回新创建的用户，这样就不需要进行单独的http调用来获取用户

this.model = new User().fromJSON(user)[0];

---

在上述情况下，至少似乎运行良好。属性有点不同，因为我在这里使用mockbackend。

什么时候调用方法

getUser（）

？您应该在init或构造函数中调用它。this.model=new User（）.fromJSON（User）；`在控制台中返回。尝试记录'this.model'。尝试

this.model=this.model.fromJSON（用户）内部
getUser
method@mickdevgetUser由表单（ngSubmit）=“f.form.valid&&getUser（）”调用@candidJ console.log正在显示检索到的用户对象，用此模型替换新用户无效。如果此操作无效，您可以尝试在plunker中重新创建此问题？谢谢。我用你的代码做了一个快速测试，得到一个错误类型“{}”不能分配给类型“User”。模型的类型“{}”中缺少属性“firstname”：User={}；plunker似乎工作正常。耶，错误是在实例化用户对象时？试试这个：
model={}不是真的。主要原因是返回的响应是一个数组，解决方案是this.model=new User（）.fromJSON（User）[0]；这是我在问题中更新的。
this.model = new User().fromJSON(user)[0];