首页 文章

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

提问于
浏览 次
0

零件：

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=""中解释它的值？

angular data-binding

1 回答

  • 3

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

    <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 和值，它们在文本类型的情况下是矛盾的(请查看下面的评论)。

    完成代码片段后更新

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

    • 给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 来自 aftertram 的例子

    回复于

相关问题