0

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

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

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

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

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

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

用户服务.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); }
 }
4

1 回答 1

0

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

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

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调用来获取用户了。

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

于 2017-03-06T11:55:56.783 回答