javascript - 如何在 Angularjs2 中使用 jquery 设置输入值并更新模型值？

Question

我计划将 AngularJS 1 应用程序升级到 AngularJS2。这里的问题是如何在 angualrjs2 中使用 jquery 设置输入值和更新模型值。

这是我的代码:

export class AppComponent {
  public user: User = {
    name: 'John',
    address: {
      address1: '11, High Street'
    }
  }
  ngOnInit() {
      console.log("User name ::"+this.user.name)
      console.log('ngOnInit')
      $('#postcode').val('123456');
  }
  public save(form: IUser, isValid: boolean) {
    console.log(form, isValid);
  }
}

plunkr 代码:http://plnkr.co/edit/BGYTpytD7kGMmRODE796

Answer 1

Angular 在内部渲染模型数据，您需要删除 <input> 中的数据绑定(bind)标签，如果你必须使用Jquery:改变

<input type="text" class="form-control" name="postcode"
          [(ngModel)]="user.address.postcode" id="postcode">

至

<input type="text" class="form-control" name="postcode"
         id="postcode">

查看演示:http://plnkr.co/edit/RVSwYjaLIPE4Uv4s75oD?p=info

另一个更好的方法就是改变模型:

public user: User = {
name: 'John',
address: {
  address1: '11, High Street',
  postcode : "N14 46T"   // <--------Add postcode property
  }
}