angular - 更新用户配置文件不起作用
问题描述
我正在使用带有弹簧启动的 Angular。我尝试从设置页面更新用户详细信息,但是当单击更新按钮时没有任何反应,所以有人可以让我知道问题出在哪里。如果您问的是更新功能是否适用于后端,是的,它可以正常工作,所以问题出在前端。
应用程序路由
{ 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[];
}
用户服务
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);
}
更新组件.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']);
}
用户.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>
解决方案
将点击事件绑定到更新按钮
<button type="submit" (click)="updateProfile()" class="btn btn-primary btn-block"> Update </button>
推荐阅读
- python-3.x - 我可以让我的用户输入接受 int 或 string 值吗?(Python)
- python - Neopixel 在运行动画时改变亮度
- clone - 关于 CREATE TABLE ... CLONE {COPY GRANTS} 行为的问题
- r - R - 生成一个图而不显示它
- node.js - 如何在集合中查找在其字段中包含特定表达式的文档?
- vue.js - 如何在 kendo-map-marker 中呈现地理点列表
- linux - 切换只读文件系统以进行更改
- c# - 使用 LINQ 在 C# 中查询 CIM XML
- react-native - 即使应用程序关闭,如何在本机反应中获得通知警报?
- python - 如何使用python从markdown字符串/文档中提取“# Heading level 1”(标题及其段落)的文本?