Angular 2 CRUD應用程序 - 模型驅動的窗體。無法使編輯工作。我正在使用ngModel

Question

我參加了一個Angular2課程，並一直沿用。做一個CRUD應用程序 - 一個模型驅動的窗體並使用一個假的api來獲取，發佈（添加），放置（更新）和刪除用戶。

以下是隻有獲取，添加和編輯過程的代碼。獲取和添加過程正常工作。 （以及刪除 - 但代碼後來，並且工作正常）。

編輯過程不起作用，我在表單中使用ngModel。我看着網絡標籤，它顯示它沒有做PUT。就好像它不認識到表單已被更改。我在Form上的驗證工作正常。

我點擊此列表中的用戶以進入編輯窗體。

在編輯表單只改變了「名」，然後點擊保存後。

控制檯選項卡：

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

---

這裏的用戶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; 
}  

}

---

下面是用戶外形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

在用戶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}) 

您需要申請更新請求，以及在用戶的形式。零件。ts

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

       }) 
      }) 

除了這一切看起來不錯。