Angular 2 CRUD应用程序 - 模型驱动表单。无法使编辑工作。我正在使用ngModel

Question

我参加了Angular2课程并继续学习。做一个CRUD应用程序 - 一个模型驱动的表单，并使用假的api来获取，发布（添加），放置（更新）和删除用户。

以下是仅包含获取，添加和编辑过程的代码。 get和add进程运行正常。 （以及删除 - 但该代码在此之后也可以正常工作）。

编辑过程不起作用，我在表单中使用ngModel。我查看网络选项卡，它显示它没有做PUT。它似乎无法识别表单已被更改。我在表格上的验证工作正常。

我单击此列表中的用户以转到编辑表单。

更改名称之后＆＃39;在“编辑表单”中单击“保存”。

控制台标签：

It shows the correct 'user id'. 

I show that I am in my user service just before the api call. Here I show 
the user object with the name change. This is the object that will be passed
to the api.

I show I return from the api call. But it shows an empty object - I think
that is what that is.

And every time I hit save button, I get the same 3 lines (I put them there
to debug) repeated. But no PUT shows up in the network tab.

网络标签：

Does not show a PUT - which I would expect. It only shows the original GET.

这是user-form.component.ts文件。

import {Component, OnInit} from 'angular2/core';
import {ControlGroup, Validators, FormBuilder} from 'angular2/common';
import {Router, CanDeactivate, RouteParams} from 'angular2/router';
import {UserService} from './user.service';
import {User} from './user';
import {NameValidators} from './nameValidators';
import {EmailValidator} from './emailValidator';
import {PhoneValidator} from './phoneValidator';

@Component({
    selector: 'user-form',
    templateUrl: 'app/user-form.template.html',
    styleUrls: ['app/styles.css'],
    providers: [UserService]
 })
export class UserFormComponent implements CanDeactivate, OnInit
{
    form: ControlGroup;
    isSaving = false;
    title: string;
    user = new User();

constructor(fb: FormBuilder, 
            private _router: Router, 
            private _userService: UserService, 
            private _RouteParams: RouteParams
           )
{ 
  this.form = fb.group
  (
    {
        name: ['', Validators.compose(
                    [Validators.required
                    ]), NameValidators.shouldBeUnique],
        email: ['', Validators.compose(
                    [Validators.required, 
                     EmailValidator.email
                    ])],                        
        phone: ['', Validators.compose(
                    [Validators.required, 
                     PhoneValidator.phone
                    ])],             
        address: fb.group
        (
            {
            street: ['', Validators.required],
            suite: [''],
            city: ['', Validators.required],
            zipcode: ['', Validators.required]
            }
        )
    }
  )
}

ngOnInit() 
{
   var id = this._RouteParams.get("id");
   this.title = id ? "Edit a User" : "Add a User";

   if (!id)
   {
      // It is an 'add user' Form so just exit.
      return;
   }
   else
   {
      // It is an 'edit user' Form.

      this._userService.getUser(id)
       .subscribe(user => 
                       this.user = user,

                       // Check to see if the user was found on the database.
                       response =>
                       {
                         if (response.status == 404)
                         {
                           this._router.navigate(['NotFound']);
                         }
                       });                         
   }
}    

save() 
{
   var result;

   if (this.form.valid)
   {
      this.isSaving = true;

      if (this.user.id)
      {
         // For testing:
         console.log("before call sent - id: " + this.user.id);

         result = this._userService.updateUser(this.user);

         // For testing:
         console.log("after call returned back: " + JSON.stringify(result));
      }
      else
      {            
         result = this._userService.addUser(this.user);          

         result.subscribe(x =>
         { 
            this._router.navigate(['Users']);
         });
      }
   }
   else
   {
       this.form.setErrors(
       {
         // Setting a key and value.
         invalidSave: true     
       });
   } 
}

routerCanDeactivate(next, previous)
{
    if (this.form.dirty && !this.isSaving)
    {
       return confirm("A user is being processed but not yet saved. Are you sure you want to continue?");
    }
    else
    {
       return true;
    }
}
}

这是user-service.ts文件。

import {Injectable} from 'angular2/core';
import {Http} from 'angular2/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Injectable()
export class UserService
{
    private _url = "http://jsonplaceholder.typicode.com/users";

constructor(private _http: Http)
{
}

getUsers() 
{    
    return this._http.get(this._url)
                     .map(res => res.json());
}

getUser(userId) 
{
    return this._http.get(this.getUserUrl(userId))
                     .map(res => res.json());
}

addUser(user) 
{ 
    return this._http.post(this._url, JSON.stringify(user))
                     .map(res => res.json());
}

updateUser(user) 
{
     // For testing:
    console.log("In the service - before calling the api: " + JSON.stringify(user));

    return this._http.put(this.getUserUrl(user.id), JSON.stringify(user))
                              .map(res => res.json());                            
}  

private getUserUrl(userId) 
{ 
    return this._url + "/" + userId;
}      

}

这是user-form-template.html文件。

<h1>{‌{ title }}</h1>

  <div class="row formpage">
   <div class="col-md-6 col-lg-6 well">
       <form [ngFormModel]="form" (ngSubmit)="save()">
           <fieldset>
               <legend>
                User
              </legend>

            <div class="form-group">
                <label for="name">Name</label>
                <input 
                    [(ngModel)]="user.name"
                    ngControl="name"
                    id="name" 
                    class="form-control"
                    type="text"
                    #localVarName="ngForm">

                <div *ngIf="localVarName.control.pending">Checking for uniqueness...</div>

                <div *ngIf="localVarName.touched && localVarName.errors">
                    <div class="alert alert-danger name" *ngIf="localVarName.errors.required">
                        Name is required.
                    </div>

                    <div class="alert alert-danger name" *ngIf="localVarName.errors.shouldBeUnique">
                        Name is already taken.
                    </div> 

                    <div class="alert alert-danger name" *ngIf="localVarName.errors.invalidSave">
                        Name is invalid.
                    </div>                          
                </div>    
            </div>

            <div class="form-group">
                <label for="email">Email</label>
                <input 
                    [(ngModel)]="user.email"
                    ngControl="email"
                    id="email" 
                    class="form-control"
                    type="text"           
                    #localVarEmail="ngForm" >
                <div *ngIf="localVarEmail.touched && localVarEmail.errors">
                    <div class="alert alert-danger email" *ngIf="localVarEmail.errors.required">
                        Email is required.
                    </div>

                    <div class="alert alert-danger email" *ngIf="localVarEmail.errors.emailInvalid">
                        Email is not valid
                    </div>

                    <div class="alert alert-danger email" *ngIf="localVarEmail.errors.invalidSave">
                        Email is invalid.
                    </div>                          
                </div>
            </div>

            <div class="form-group">
                <label for="phone">Phone</label>
                <input 
                    [(ngModel)]="user.phone"
                    ngControl="phone"
                    id="phone" 
                    class="form-control"
                    type="text"           
                    #localVarPhone="ngForm" >    
                <div *ngIf="localVarPhone.touched && localVarPhone.errors">
                    <div class="alert alert-danger phone" *ngIf="localVarPhone.errors.required">
                        Phone is required.
                    </div>

                    <div class="alert alert-danger phone" *ngIf="localVarPhone.errors.phoneInvalid">
                        Phone is not valid
                    </div>

                    <div class="alert alert-danger phone" *ngIf="localVarPhone.errors.invalidSave">
                        Phone is invalid.
                    </div>                          
                </div>                  
            </div>
        </fieldset>

        <fieldset ngControlGroup="address">
            <legend>
                Address
            </legend>

            <div>
                <div class="form-group">
                    <label for="street">Street</label>
                    <input 
                        [(ngModel)]="user.address.street"
                        ngControl="street"
                        id="street" 
                        class="form-control"
                        type="text"           
                        #localVarStreet="ngForm" >
                    <div class="alert alert-danger street" *ngIf="localVarStreet.touched && !localVarStreet.valid">
                        Street is required.
                    </div>            
                </div>

                <div class="form-group">
                    <label for="suite">Suite</label>
                    <input 
                        [(ngModel)]="user.address.suite"                    
                        ngControl="suite"
                        id="suite" 
                        class="form-control"
                        type="text"           
                        #localVarSuite="ngForm" >
                    <div class="alert alert-danger suite" *ngIf="localVarSuite.touched && !localVarSuite.valid">
                        Suite is required.
                    </div>            
                </div> 

                <div class="form-group">
                    <label for="city">City</label>
                    <input
                        [(ngModel)]="user.address.city"                     
                        ngControl="city"
                        id="city" 
                        class="form-control"
                        type="text"           
                        #localVarCity="ngForm" >
                    <div class="alert alert-danger city" *ngIf="localVarCity.touched && !localVarCity.valid">
                        City is required.
                    </div>            
                </div>

                <div class="form-group">
                    <label for="zipcode">Zip Code</label>
                    <input 
                        [(ngModel)]="user.address.zipcode"
                        ngControl="zipcode"
                        id="zipcode" 
                        class="form-control"
                        type="text"           
                        #localVarZipCode="ngForm" >
                    <div class="alert alert-danger zipcode" *ngIf="localVarZipCode.touched && !localVarZipCode.valid">
                        Zip Code is required.
                    </div>            
                </div>          
            </div>  
        </fieldset>   

        <button class="btn btn-primary" type="submit" [disabled]="!form.valid">Save</button>
    </form>
</div>  

这是用户类 - user.ts.用于双向绑定。

export class User
{
   id: number;
   name: string;
   phone: string;
   email: string; 
   // Instantiate the Address class.
   address = new Address();
} 

export class Address 
{
   street: string;
   suite: string;
   city: string;
   zipcode: string;    
}

Answer 1

在user-service.ts文件中，添加标题

 private globalHeaders: Headers = new Headers();
 globalHeaders.append('Content-Type','application/json')

在http put

中修改以下请求

 .put(this.getUserUrl(user.id), JSON.stringify(user), {headers: this.globalHeaders})

您还需要在user-form.component.ts

中订阅更新请求

    this._userService.updateUser(this.user)
                  .subscribe(
                   response => {
                        console.log(response)

                })
            })

除此之外一切都很好。