更新用户配置文件不起作用

Question

我将 Angular 与 spring-boot 一起使用。我尝试从设置页面更新用户详细信息，但是当单击更新按钮时没有任何反应，所以有人可以让我知道问题出在哪里。如果您要问的是更新功能是否适用于后端，是的，它可以正常工作，所以问题出在前端。

app.routing

 { path: 'profile-update/:id', component: ProfileUpdateComponent },

注册数据

export interface SignUpData {
    id: string;
    username: string;
    email: string;
    nom: string;
    prenom: string;
    telephone: number;
    roles: string[];
    password: string;
    specialite: string;
    adresses: string[];

  }

user.service

  const API_URL = 'http://localhost:8080/user/';

    const httpOptions = {
      headers: new HttpHeaders({ 'Content-Type': 'application/json' })
    };
adresses: string[];
          updateProfile(id: string, userData: SignUpData): Observable<any> {
            return this.http.put(API_URL + 'update/' + id, userData, httpOptions);
          }

update.component.ts

  updateProfile() {
    const {adresse1, ...rest} = this.form;
    const userData: SignUpData = {...rest,  adresses: [adresse1]};
    this.userservice.updateProfile(this.id, userData).subscribe(
      data => {
        console.log(data);
      },
      err => {
        this.errorMessage = err.error.message;
      }
    );
  }
  onSubmit() { 
    this.updateProfile();
    this.gotoList();   
  }

  gotoList() {
    this.router.navigate(['profile']);
  }

user.html

<form
        name="form"
        (ngSubmit)="f.form.valid && onSubmit()"
        #f="ngForm"
        novalidate>
        <div class="form-row">
            <div class="col form-group">
                <label>First name </label>   
                <input type="text" class="form-control" placeholder=""
                name="prenom"
                [(ngModel)]="form.prenom"

                #prenom="ngModel"> 
            </div> <!-- form-group end.// -->
            <div class="col form-group">
                <label>Last name</label>
            <input type="text" class="form-control" placeholder=" "
            name="nom"
                [(ngModel)]="form.nom"

                #nom="ngModel">
            </div> <!-- form-group end.// -->
      </div> <!-- form-row end.// -->


        <div class="form-group">
            <button type="submit" class="btn btn-primary btn-block"> Update </button>
        </div> <!-- form-group// -->      


      </form>

Answer 1

将点击事件绑定到更新按钮

<button type="submit" (click)="updateProfile()" class="btn btn-primary btn-block"> Update </button>