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”ng model更新“firstName:”条目。问题是，除非用户修改输入的值，否则ngModel被读取为null，即使已经存在< code > value = " { { current user . first name } } " 的值。

如何设置 ngModel 以从实际输入的值=“”解释其值？

Answer 1

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

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

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

this.fname = currentUser.firstName

并在html中

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

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

完成代码段后更新

要使您当前的代码正常工作，请执行以下更改：

> < li>

将类型赋予< code>currentUser like

< code > public current user:any = { }；

移除< code>updateUserEntry中的参数，但从< code>this.currentUser中获取值

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

更好的方法

但是我相信你把事情复杂化了。在我看来，除非你需要双向数据绑定，否则不要使用ngModel。请使用thoughtram中的FormGroup示例