Question

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

当我在init手动启动模型时，表单将正确显示用户的数据。如果我从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

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

如果您真的没有理由使用课程，我建议您转到界面：

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="upload_image_gallery">
        <div class="upload_image_item" ng-repeat='image in images'>
            <i class="fa fa-close" ng-click="remove_gallery_img($index)"></i>
            <img ng-show="image" ng-src="{{ image.resized.dataURL}}" />
    </div>
</div>

并且不需要NgZone。

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

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

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

在休息调用后Angular 2 ngModel未更新

1 个答案: