Question

组件：

git rebase

形式：

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() {
  }

}

该函数更新JSON记录。例如，它使用“fname”ngModel更新“firstName：”条目。问题是，除非用户修改了输入的值，否则ngModel将被读取为null，即使<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>已经存在一个值。

如何设置ngModel以从实际输入value="{{ currentUser.firstName }}"解释它的值？

Answer 1

您无需使用fname之类的其他变量，直接将currentUser.firstName传递给ngModel。

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

但是，如果我的理解错误，并且您希望使用fname 初始化currentUser.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。而是使用FormGroup Example from thoughtram

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

1 个答案: