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

前端之家收集整理的这篇文章主要介绍了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()导致为整个应用程序运行更改检测,因此不仅覆盖当前组件的每个绑定.

猜你在找的Angularjs相关文章