角度6：jquery更新字段时，组件值未更新

Question

我刚刚注意到，当通过jquery更新输入字段的值时，绑定到Inputfield的组件中的值没有更新。

Component.ts

export class AppComponent{
searchString = "";
}

HTML

<input id="txSearchstring" type="text" [(ngModel)]="searchString"  >

jquery

$('#txSearchstring').val('this is a test data');

当我尝试记录searchString的值时，该值仍然为空。

有什么建议吗？

Answer 1

Angular Monkey使用区域来运行更改检测机制来修补浏览器事件，setTimeout，setInterval和ajax调用。每次运行更改检测代码时，它都会检查绑定到模板的所有值的更改。 现在，在您通过jQuery更改输入字段的值的情况下，不会调用浏览器change事件，因此更改检测不会运行，因此更改后的输入字段值不会反映在绑定属性“ searchString”中。之后手动运行更改检测 $('#txSearchstring').val('this is a test data');将解决问题：

• ChangeDetectorRef.detectChanges（）（仅检查当前组件及其子组件）。这里ChangeDetectorRef是可以注入的依赖