Angular2编辑个人资料：无法在HTML输入框回显用户数据

我仔细看了你的代码，发现导致用户数据无法正常回显的核心问题有两个：一是你同时给input标签设置了[(ngModel)]双向绑定和[value]属性，这两者会产生冲突；二是初始化时你把用户数据存在了accountDetails里，但ngModel绑定的是user对象，两者没有同步。

具体解决方案如下： #

1. 移除input上的[value]属性

因为[(ngModel)]已经负责了数据的双向绑定，再设置[value]会被ngModel覆盖，完全没必要保留。修改后的HTML代码片段：

<form novalidate (ngSubmit)="onFormSubmit(signupForm)" #signupForm="ngForm">
 <div class="form-inputs clearfix">
 <div class="row">
 <div class="col-md-6">
 <p>
 <label class="required">First Name<span>*</span></label>
 <!-- 移除了[value]属性 -->
 <input type="text" name="firstName" [(ngModel)]="user.firstName" #firstName="ngModel" required>
 <p>{{accountDetails.firstName}} </p>
 <span *ngIf="firstName.invalid && (firstName.dirty || firstName.touched)" class="input-error">
 <span *ngIf="firstName.errors?.required"> First Name field can't be blank </span>
 </span>
 </p>
 </div>
 </div>
 </div>
</form>

2. 在ngOnInit中同步用户数据到user对象

你已经从localStorage拿到了accountDetails，只需要把它的属性赋值给user，这样ngModel绑定的user就有了初始值，input就能正常回显数据了。修改后的TS代码：

ngOnInit() {
 let profile = JSON.parse(localStorage.getItem("profile"));
 this.accountDetails = profile.user;
 // 把accountDetails的数据同步到user对象，实现回显
 this.user = { ...this.accountDetails };
 console.log(this.accountDetails);
}

这里用扩展运算符{ ...this.accountDetails }是为了创建一个新对象，避免后续修改user时直接影响accountDetails（如果你的业务不需要隔离对象，也可以直接赋值this.user = this.accountDetails）。

额外优化建议 #

• 尽量避免使用any类型，你可以定义一个用户接口（比如User）来规范数据结构，让代码更健壮：

  interface User {
    firstName: string;
    userId: string;
    // 其他用户属性
  }
  
  public user: User = {} as User;
  public accountDetails: User = {} as User;
  

• 处理localStorage获取数据的异常情况，比如profile可能为null，可以加个判断：

  let profile = JSON.parse(localStorage.getItem("profile") || '{}');
  if (profile.user) {
    this.accountDetails = profile.user;
    this.user = { ...this.accountDetails };
  }
  

内容的提问来源于stack exchange，提问作者j-s