双向数据绑定，更新个人资料

最新推荐文章于 2024-05-15 17:02:15 发布

原创最新推荐文章于 2024-05-15 17:02:15 发布 · 286 阅读

1 ·

CC 4.0 BY-SA版权

本文详细介绍了如何在Angular中使用双向数据绑定修改个人信息，包括初始化数据、更新用户信息及提交修改的方法。通过具体代码示例，展示了InputItem组件与用户数据的绑定过程，以及如何在服务中更新用户数据。

修改个人信息

1.双向数据绑定

 <div class="am-list" style="margin:0;">
      <div class="am-list-body" >
        <InputItem [clear]="true" [(ngModel)]="user.code"  [content]="'用户号'"></InputItem>
        <InputItem [clear]="true" [(ngModel)]="user.name" [content]="'用户名称'"></InputItem>
        <InputItem [clear]="true" [(ngModel)]="user.email" [content]="'email'"></InputItem>
        <InputItem [clear]="true" [(ngModel)]="user.english_name" [content]="'姓名'"></InputItem>
        <InputItem [clear]="true" [(ngModel)]="user.gender" [content]="'性别'"></InputItem>
        <InputItem [clear]="true" [(ngModel)]="user.position" [content]="'职位'"></InputItem>
        <InputItem [clear]="true" [(ngModel)]="user.errmsg" [content]="'个人说明'"></InputItem>
        <InputItem [clear]="true" [(ngModel)]="user.position" [content]="'部门'"></InputItem>
	</div>
</div>

2.初始化数据

 ngOnInit() {
    this.activatedRoute.params.subscribe(params => {
      this.userService.userdata(params.id).subscribe(data => {
        this.user = data;
        console.log(this.user);
      });
    });
  }

console.log(this.user)

初始化的数据
3.这里修改会双向绑定修改的数据

4.在dataservice.ts中

updateUser(user: User) {
    return this.dataService.update(`test/userList/${user.userid}`, user);
  }

在这里插入图片描述

5.// 提交修改个人信息

 submit() {
    this.userService.updateUser(this.user).subscribe(data => {
      this.userService.user = this.user;
      this.router.navigate(['/mine']);
    });
  }

把修改后的this.user传进去；
要查看原来的信息 this.user 是已经修改后的（数据双向绑定）把this.user赋值给原来的user；
最后修改完成以后点击返回到修改后的个人信息

在这里插入图片描述