Question

我需要在js更改事件中更新角度模型，这是一个简化的隔离演示：

hero-form.component.html：

<button type="button" id='btn1'>change</button>
<input type="text" id="txt1" name="txt1" [(ngModel)]="str1" />{{str1}}

hero-form.component.ts：

...
    import * as $ from "jquery";
...
export class HeroFormComponent implements OnInit {
    str1 = "initval";

    ngAfterViewInit(){
    var txt1 = $('#txt1');

    $('#btn1').on('click', function(){  
      txt1.val('new val').change();
      // when js/jquery triggers a change on the input, I need the str1 
      // which was bound using [(ngModel)] to be updated
    });
}

单击按钮时，文本框的值将更改为new val，但是插值{{str1}}不会受到影响，但是，如果我手动更改文本框的值，它将起作用。

是否可以在js change事件上更新与ngmodel绑定的模型？

Answer 1

在有角度的项目中，我们不应该像您那样实现您的要求。

您可以使用(click)事件和#txt1来获取价值

在ts组件中实现更改str1值。

export class AppComponent {
  name = 'Binding data in Angular';

  str1 = "initval";

  ngAfterViewInit() {

  }
  change(val) {
    console.log(val)
    this.str1 = val;
  }
}

更新的HTML

<hello name="{{ name }}"></hello>
<button type="button" id='btn1' (click)="change(txt1.value)">change</button>
<input type="text" #txt1 id="txt1" name="txt1" />{{str1}}

演示：https://stackblitz.com/edit/angular-click-change-value

双向更改[（ngmodel）]不受jquery更改事件的影响

1 个答案: