Angular2 - 如何将 ngModel 值设置为输入值

Question

成分：

export class AccountComponent implements OnInit {
  public error: any;
  currentUser = {};

  constructor(private afService: AF) {
    afService.getCurrentUserInfo().then(currentUserDetails => {
      this.currentUser = currentUserDetails;
    });
  }

  updateUserEntry(fname, lname, phone, bio) {

    this.afService.getCurrentUserInfo().then((user) => {
      let details = [];
      details.push(user);
      console.log(details[0].userID);
      this.afService.updateUserEntry(details[0].userID, fname, lname, phone, bio).then(() => {
        console.log("Updated entry");
      })
      .catch((error) => {
        this.error = error;
        console.log("error");
      });
    });
  }

  ngOnInit() {
  }

}

形式：

<form>
        <dl class="form-group">
          <dt><label>First Name</label></dt>
          <dd><input [(ngModel)]="currentUser.firstName" name="fname" class="form-control" type="text"></dd>
        </dl>

        <dl class="form-group">
          <dt><label>Last Name</label></dt>
          <dd><input [(ngModel)]="currentUser.lastName" name="lname" class="form-control" type="text"></dd>
        </dl>

        <dl class="form-group">
          <dt><label>Email</label></dt>
          <dd><input [(ngModel)]="currentUser.email" name="email" class="form-control" type="email" disabled></dd>
        </dl>

        <dl class="form-group">
          <dt><label>Mobile Phone</label></dt>
          <dd><input [(ngModel)]="currentUser.phone" name="phone" class="form-control" type="text"></dd>
        </dl>

        <dl class="form-group">
          <dt><label>Bio</label></dt>
          <dd>
            <textarea [(ngModel)]="currentUser.bio" name="bio" class="form-control"></textarea>
          </dd>
        </dl>

        <div class="form-actions">
          <button type="button" class="btn btn-primary" (click)="updateUserEntry(fname, lname, phone, bio)">Save changes</button>
        </div>
      </form>

该函数更新 JSON 记录。例如，它使用“fname”ngModel 更新“firstName:”条目。问题是，除非用户修改输入的值，否则 ngModel 会被读取为 null，即使值已经存在于value="{{ currentUser.firstName }}".

如何设置 ngModel 来解释其来自实际输入的值value=""？

Answer 1

您不需要使用不同的变量，例如fname，直接传递currentUser.firstName给 ngModel。

<input 
  type="text"
  [(ngModel)]="currentUser.firstName" 
  name="fname" 
  class="form-control">

但是，如果我的理解是错误的，并且您想初始化，则fnamecurrentUser.firstName在组件中执行此操作。

this.fname = currentUser.firstName

并在html中

 <input 
      type="text"
      [(ngModel)]="fname" 
      name="fname" 
      class="form-control">

不要同时使用 ngModel 和 value，它们在文本类型的情况下是矛盾的（查看下面的评论）。

完成代码片段后更新

为了使您当前的代码正常工作，请进行以下更改：

• 给currentUser喜欢的类型

  public currentUser:any = {};

• 删除 中的参数updateUserEntry，但从中获取值this.currentUser

  this.afService.updateUserEntry(
      details[0].userID, 
      this.currentUser.fname,
      this.currentUser.lname,
      this.currentUser.phone, 
      this.currentUser.bio)
  

更好的方法

但我相信你让事情变得复杂了。在我看来，除非您需要双向数据绑定，否则永远不要使用 ngModel。而是使用Thoughtram 中的 FormGroup 示例