게시물 요청과 관련된 각도 문제

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에 게시 요청을 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 내 객체를 시도했지만 사용자 이름은 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합니다.

이 서비스 업데이트 방법에 전달하는 변수는 당신이 당신의 상황에 선언 된 public 속성을 사용하고 이렇게 코드

this.updateService.updateProfile(this.userToUpdate) 

에서 볼 수

this.userToUpdate 

입니다 귀하의 구성 요소

그래서 문제를 해결하려면 두 가지 옵션이 있습니다. 어느 쪽이든 당신은

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

를 수행하여 구성 요소 속성에 원하는 값을 설정 또는 당신은

this.updateService.updateProfile(userToUpdate)