Html 我的PUT方法不是'；即使它在春天工作，也不能在有角度的地方工作

我有一个显示登录用户信息的网页，该信息是使用SpringRESTAPI从数据库调用的。每个用户属性旁边都有一个编辑按钮，单击该按钮时会显示一个输入字段，用户可以使用该字段编辑该属性（到目前为止，我只将其添加到密码字段中）

出于某种原因，在我点击按钮并编辑属性后，即使它应该在控制台中显示“works”，也不会发生任何事情

以下是处理更新的spring控制器方法：

@PutMapping("myProfile/edit")
public ResponseEntity<Object> updateProfile(@CurrentUser User currentUser, @RequestBody EditUserProfileRequest user){
    User updatedUser = userService.updateProfile(currentUser, user);
    return ResponseEntity.ok().body("Update Success!");
}

EditUserProfileRequest类：

package com.example.demo.contract;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@AllArgsConstructor
@NoArgsConstructor
@Data
public class EditUserProfileRequest {
   private String firstName;
   private String lastName;
   private String password;
   private String email;
   private String location;
   private String bio;
   private Long phoneNumber;
   private Long zipCode;
}

以下是密码字段的html代码，它将首先显示普通密码，然后在单击编辑按钮后更改为输入字段：

<div style="margin-top: 3px; margin-bottom: 3px;">
        <h5 style="float: left; margin-left: 160px; margin-top: 18px;">
          <b>Password: </b>
        </h5>
        <div id="hashPassword" style="display: block">
          <div style="width: 100px; margin-left: 233px; float: left;">
              <span style="font-weight: 600">*********</span>
          </div>
          <mat-icon id="hashPassword" aria-label="EDIT" aria-hidden="false" (click)="editPassword()" style="cursor: pointer; margin-left: 446px">edit</mat-icon>
        </div>
        <div id="editPassword" style="display: none">
          <div style="width: 800px; margin-left: 233px; float: left;">
          <form [formGroup]="passwordEditForm" (ngSubmit)="onPasswordSubmit()">
            <div class="form-group">
              <label>Password</label>
              <input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
              <div *ngIf="submitted && f.password.errors" class="invalid-feedback">
                  <div *ngIf="f.password.errors.required">Password is required</div>
                  <div *ngIf="f.password.errors.minlength">Password must be at least 4 characters</div>
              </div>
          </div>
          <div class="form-group">
              <label>Confirm Password</label>
              <input type="password" formControlName="confirmPassword" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.confirmPassword.errors }" />
              <div *ngIf="submitted && f.confirmPassword.errors" class="invalid-feedback">
                  <div *ngIf="f.confirmPassword.errors.required">Confirm Password is required</div>
                  <div *ngIf="f.confirmPassword.errors.mustMatch">Passwords must match</div>
              </div>
          </div>
          <div class="form-group">
            <button type="button" class="btn btn-primary">Confirm Edit</button>
          </div>
          </form>
        </div>
        </div>
      </div>

最后是具有编辑方法的用户服务：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class UserService {
  constructor(private http: HttpClient) {
    this.http = http;
  }

  getAllUsers(token: any): Observable<any> {
    // tslint:disable-next-line: object-literal-key-quotes
    const headers = new HttpHeaders({'Authorization': 'Bearer ' + token});
    return this.http.get('http://localhost:8082/users', {headers: headers});
  }

  getUser(token: any): Observable<any> {
    // tslint:disable-next-line: object-literal-key-quotes
    const headers = new HttpHeaders({'Authorization': 'Bearer ' + token});
    return this.http.get('http://localhost:8082/getuser', {headers: headers});
  }

  getAllOffer(): Observable<any> {
    return this.http.get('http://localhost:8082/getAllOffer');
  }

  getServices(): Observable<any> {
    return this.http.get('http://localhost:8082/services');
  }

  editUser(user, token): Observable<any> {
    const headers = new HttpHeaders({'Authorization': 'Bearer ' + token});
    return this.http.put('http://localhost:8082/myProfile/edit', user, token);
  }
}

从'@angular/core'导入{Injectable}；
从'@angular/common/http'导入{HttpClient，HttpHeaders}；
从“rxjs”导入{Observable}；
@注射的({
providedIn:'根'
})
导出类用户服务{
构造函数（专用http:HttpClient）{
this.http=http；
}
getAllUsers（标记：任意）：可观察{
//tslint：禁用下一行：对象文字键引号
const headers=新的HttpHeaders（{'Authorization'：'Bearer'+token}）；
返回此.http.get（'http://localhost:8082/users“，{headers:headers}）；
}
getUser（标记：any）：可观察{
//tslint：禁用下一行：对象文字键引号
const headers=新的HttpHeaders（{'Authorization'：'Bearer'+token}）；
返回此.http.get（'http://localhost:8082/getuser“，{headers:headers}）；
}
getAllOffer（）：可观察{
返回此.http.get（'http://localhost:8082/getAllOffer');
}
getServices（）：可观察{
返回此.http.get（'http://localhost:8082/services');
}
editUser（用户，令牌）：可观察{
const headers=新的HttpHeaders（{'Authorization'：'Bearer'+token}）；
返回此.http.put（'http://localhost:8082/myProfile/edit，用户，令牌）；
}
}

的第三个参数应该是options对象。更新

editUser

方法，以便将包含

标题的对象作为第三个参数传递，而不是
标记
：

editUser(user, token): Observable<any> {
  const headers = new HttpHeaders({'Authorization': 'Bearer ' + token});
  return this.http.put('http://localhost:8082/myProfile/edit', user, { headers });
}

editUser（用户，令牌）：可观察{
const headers=新的HttpHeaders（{'Authorization'：'Bearer'+token}）；
返回此.http.put（'http://localhost:8082/myProfile/edit，用户，{headers}）；
}

希望这有帮助
 HttpClient.put（）的第二个参数是body，第三个参数是options。您调用它就像调用this.http.put（'http://localhost:8082/myProfile/edit，用户，令牌）

。您正在将

标记

作为第三个参数传递，而不是带有标题的选项。我想你的意思是做一些类似于

this.http.put的事情http://localhost:8082/myProfile/edit，用户，{headers}）

。请尝试至少作出改变，让我们知道它是否有效。

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class UserService {
  constructor(private http: HttpClient) {
    this.http = http;
  }

  getAllUsers(token: any): Observable<any> {
    // tslint:disable-next-line: object-literal-key-quotes
    const headers = new HttpHeaders({'Authorization': 'Bearer ' + token});
    return this.http.get('http://localhost:8082/users', {headers: headers});
  }

  getUser(token: any): Observable<any> {
    // tslint:disable-next-line: object-literal-key-quotes
    const headers = new HttpHeaders({'Authorization': 'Bearer ' + token});
    return this.http.get('http://localhost:8082/getuser', {headers: headers});
  }

  getAllOffer(): Observable<any> {
    return this.http.get('http://localhost:8082/getAllOffer');
  }

  getServices(): Observable<any> {
    return this.http.get('http://localhost:8082/services');
  }

  editUser(user, token): Observable<any> {
    const headers = new HttpHeaders({'Authorization': 'Bearer ' + token});
    return this.http.put('http://localhost:8082/myProfile/edit', user, token);
  }
}

editUser(user, token): Observable<any> {
  const headers = new HttpHeaders({'Authorization': 'Bearer ' + token});
  return this.http.put('http://localhost:8082/myProfile/edit', user, { headers });
}