Angular 2 ngModel 在安静的调用后未更新

Question

我有一个简单的用户组件来检索用户的名字和姓氏。当用户单击提交按钮时，它将进行一个安静的调用并检索详细信息并传回我的用户对象。但是，目前还没有发生这种情况，我不确定出了什么问题。

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

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

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

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

我不确定是否有任何方法可以确保我的服务始终返回 JSON 对象而不是对象数组？

userservice.ts

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

我的用户组件 - 虽然诊断程序正确显示数据

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

用户模型，fromJSON方法是将响应转换为我的用户模型。

export class User {
  username: string;      
  firstname: string;
  lastname: string; 

  fromJSON(json) {
        for (var propName in json)
            this[propName] = json[propName];
        return this;
    }
}

我的组件

 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); }
 }

Answer 1

我不知道这是否能解决你的问题，但我会在这里给出一些指示。

如果你真的没有理由使用类，我建议你转向接口：

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

这里不应该需要 NgZone。

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

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

如果你对自己的 API 有控制权，为什么不在实际创建新用户时返回新创建的用户，这样你就不需要单独进行 http 调用来获取用户了。

至少 this plunker 似乎运作良好。属性有点不同，因为我在这里使用了 mockbackend。