двустороннее связывание [(ngmodel)] не зависит от события изменения jquery

Question

Мне нужно обновить угловую модель для события изменения js, это упрощенное, изолированное демо:

герой-form.component.html:

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

герой-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}} это не влияет, однако, если я изменяю значение текстового поля вручную, оно работает.

возможно ли обновить модель, связанную с ngmodel, при событии изменения js?

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