angular – 为什么在组件内调用detectChanges()不会更新值,但是在setTimeout()中包装代码呢?

我正在尝试自动从< mat-autocomplete ...>中的选项集中选择第一个值.

export class ExampleComponent implements OnInit,AfterViewInit {

@ViewChildren('auto') matAutocomplete: QueryList<any>;

constructor(private cdr: ChangeDetectorRef) { }

ngAfterViewInit() {
    this.foundItemsList.changes.subscribe(options => {
        // ---> This simply works!
        setTimeout(() => this.matAutocomplete.first._keyManager.setFirstItemActive(),0);

        // ---> This doesn't works?! No error shown,it just seems that the above function isn't called at all. 
        this.matAutocomplete.first._keyManager.setFirstItemActive()
        this.cdr.detectChanges();
    });
}

https://github.com/angular/material2/blob/master/src/lib/autocomplete/autocomplete.ts

AFAIK,detectChanges做的是检查当前组件及其所有子组件的变化检测器,对吗?但似乎它在上面的场景中不起作用.

解决方法

this.cdr.detectChanges()仅运行当前组件(和后代)的更改检测.如果setFirstItemActive()导致其他地方的更改,则不包括内容. setTimeout()或zone.run(…)或ApplicationRef.tick()导致为整个应用程序运行更改检测,因此不仅覆盖当前组件的每个绑定.

相关文章

ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中...
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是...
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题,...
Angular实现下拉菜单多选写这篇文章时,引用文章地址如下:h...
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目...
Angular数据更新不及时问题探讨前言 在修复控制角标正确变...