在Angular上發布請求的問題

Question

我目前正在嘗試更新用戶數據。 這是我的html表格

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

然后我創建了updateservice.ts，在其中我向API發出發布請求，如下所示

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())
}

但是這里我卡住了，因為我的瀏覽器在開發人員控制台中給了我錯誤，我嘗試用用戶名和電子郵件來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'])
      }
    });
  }

}

錯誤圖片

Answer 1

從我所看到的來看，您有兩個具有相同名稱的變量的兩個不同副本，這就是造成混淆的原因

在更新方法開始時，您正在做

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

const是一個塊范圍變量，表示您正在此方法內創建一個名為userToUpdate的副本。

您傳遞給服務更新方法的變量是

this.userToUpdate

如您在代碼中所見

this.updateService.updateProfile(this.userToUpdate)

這樣，您就可以使用在組件上下文中聲明的公共屬性

因此，要解決您的問題，您有兩種選擇。 您可以通過以下方式為組件屬性設置所需的值

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

或者您將本地userToUpdate傳遞給您的服務電話

this.updateService.updateProfile(userToUpdate)