投稿要求の角度に関する問題

Question

現在、ユーザーデータを更新しようとしています。だからここに私はちょうど

updateProfile(user){ 
    console.log("update profile func", user) 
    let headers = new Headers(); 
    this.authToken = this.authService.loadToken(); 
    headers.append('Authorization', this.authToken) 
    headers.append('Content-Type', 'application/json'); 
    return this.http.post('http://localhost:17696/users/update', user, {headers:headers}) 
    .map(res => res.json()) 
} 

を次のようにAPIにPOSTリクエストを作るupdateservice.tsを作成した後

 <form (submit)="onUserUpdateSubmit()"class="form-horizontal" role="form"> 
     <div class="form-group"> 
     <label class="col-lg-3 control-label">Username:</label> 
     <div class="col-lg-8"> 
      <input class="form-control" [(ngModel)]="username" name="username" type="text"> 
     </div> 
     </div> 
     <div class="form-group"> 
     <label class="col-lg-3 control-label">Email:</label> 
     <div class="col-lg-8"> 
      <input class="form-control" [(ngModel)]="email" name="email" type="text"> 
     </div> 
     </div> 
     <label class="col-md-3 control-label"></label> 
     <div class="col-md-8"> 
      <input class="btn btn-primary" value="Save Changes" type="submit"> 
      <span></span> 
      <input class="btn btn-default" value="Cancel" type="reset"> 
     </div> 
     </div> 
    </form> 

私のHTMLフォームである。しかし、ここで私のブラウザはデベロッパーコンソールで私にエラーを与える原因私が捕まってしまいました 私はユーザー名と電子メールでconsole.logを作成しようとしましたが、私はusername：falseを取得しました。また、私はconsole.log私のオブジェクトは、ユーザーと呼ばれますが、それはしかし、未定義です。 はこちらprofile.component.tsある

import { Component, OnInit } from '@angular/core'; 
import { AuthService } from '../../services/auth.service' 
import { ValidateService } from '../../services/validate.service' 
import { FlashMessagesService } from 'angular2-flash-messages' 
import { Router } from '@angular/router' 
import { UpdateService } from '../../services/update.service' 

@Component({ 
    selector: 'app-profile', 
    templateUrl: './profile.component.html', 
    styleUrls: ['./profile.component.css'] 
}) 
export class ProfileComponent implements OnInit { 

    user: Object; 
    userToUpdate: Object; 
    username: String; 
    email: String; 
    avatar: String; 

    constructor(private authService: AuthService, 
    private router: Router, 
    private flashMessage:FlashMessagesService, 
    private validateService : ValidateService, 
    private updateService: UpdateService) { } 

    ngOnInit() { 
    this.authService.getProfile().subscribe(profile=>{ 
     this.user = profile.user; 
    }, 
    err=>{ 
     console.log(err); 
     return false; 
    }); 
    } 

    onUserUpdateSubmit(){ 
    const userToUpdate ={ 
     username:this.username, 
     email:this.email, 
    } 
    console.log(userToUpdate) 
    //required fields 
    if(!this.validateService.validateUserUpdate(userToUpdate)){ 
     this.flashMessage.show('Please, fill in all fields', {cssClass: 'alert-danger', timeout:3000}); 
     return false; 
    } 

    //validate email  
    if(!this.validateService.validateEmail(userToUpdate.email)){ 
     this.flashMessage.show('Please, enter correct email', {cssClass: 'alert-danger', timeout:3000});  
     return false; 
    } 



    this.updateService.updateProfile(userToUpdate).subscribe(data=>{ 
     console.log("its from update service profilecomponent.ts") 
     console.log(data) 
     if(data/*.success*/){ //commented cause response doesnt have property success but still registering user without displaying the flash message 
     this.flashMessage.show('You successfuly changed your info', {cssClass: 'alert-success', timeout:3000}); 
     this.router.navigate(['/profile']) 
     }else{ 
     this.flashMessage.show('Something went wrong', {cssClass: 'alert-danger', timeout:3000}); 
     this.router.navigate(['/profile']) 
     } 
    }); 
    } 

} 

私はあなたが同じ名前の変数の二つの異なるコピーを持っており、それが最初に重複が整理

を引き起こしているものだ見ることができるものから、

image of errors

Answer 1

あなたの更新方法のうち

const userToUpdate ={ 
    username:this.username, 
    email:this.email, 
} 

constは、あなたがcであることを意味するブロックスコープ変数ですこのメソッド内でuserToUpdateという名前のコピーをreatingします。

あなたがのコンテキストに宣言されているパブリックプロパティを使用している。これにより、コード内で

this.updateService.updateProfile(this.userToUpdate) 

を見ることができるよう、サービスの更新メソッドに渡している変数が

this.userToUpdate 

ですあなたのコンポーネント

したがって、問題を解決するには2つの方法があります。どちらかあなたは

this.userToUpdate ={ 
    username:this.username, 
    email:this.email, 
} 

を行うことにより、コンポーネントのプロパティに必要な値を設定するか、またはあなたは

this.updateService.updateProfile(userToUpdate)