如何在Angularjs2中使用jquery设置输入值和更新模型值? [英] How to set input value and updating model value using jquery in Angularjs2?

问题描述

我打算将angularjs 1应用程序升级到angularjs2. 这里的问题是如何使用angualrjs2中的jquery设置输入值和更新模型值.

I'm planning to upgrade angularjs 1 application to angularjs2. Here issue is how to set input value and update model value using jquery in angualrjs2.

这是我的代码:

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

plunkr code : http://plnkr.co/edit/BGYTpytD7kGMmRODE796

推荐答案

内部角度渲染模型数据，如果必须使用Jquery，则需要删除<input>标记中的数据绑定: 更改

Angular render model data internally, you will need to remove data binding in the <input> tag, if you have to use Jquery: Change

<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

另一种更好的方法是更改​​模型:

The other better way will be just change the model:

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

这篇关于如何在Angularjs2中使用jquery设置输入值和更新模型值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！