角度2 CRUDアプリケーション - モデル駆動型。編集を機能させることができません。私はngModelを使用しています

Question

私はAngular2コースを受講しています。 CRUDアプリケーションを実行する - モデル駆動型フォームで、偽のAPIを使用してユーザーを取得、追加（追加）、配置（更新）、および削除します。

ここには、取得、追加、編集のプロセスだけのコードがあります。取得プロセスと追加プロセスは正常に動作します。 （だけでなく、削除 - しかし、そのコードはこの後に来て、うまく動作します）。

編集プロセスがうまくいかず、フォームにngModelが使用されています。私はネットワークタブを見て、それがPUTをやっていないことを示しています。これは、フォームが変更されたことを認識していないかのようです。フォーム上のバリデーターは正常に動作します。

このリストのユーザーをクリックして、編集フォームにアクセスします。

編集フォームに単に「name」を変更し、[保存]をクリックした後。

コンソールタブ：

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. 2ウェイバインディングに使用されます。

ユーザーservice.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

、

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

あなたはユーザーフォームでも同様に更新要求をサブスクライブする必要があります置くのhttpリクエストを下回る修正

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

ヘッダを追加。成分。ts

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

       }) 
      }) 

これ以外はすべてうまく見えます。