只有在我移动鼠标后，Angular 组件才会更新 View 中的变量

Question

问题

我有一个订阅 Observable 的组件。 myValue 的值仅在我将鼠标移到浏览器窗口上后才会在模板中更新。

最奇怪的是这两个console.log 工作正常。

• 我重新加载页面并保持鼠标静止
• 我可以在控制台中看到更新后的值
• 模板仍然显示“defaultValue”值
• 我移动鼠标，模板显示我已经在控制台中看到的更新值。

我设法让它与 ChangeDetectorRef 和 .detectChanges() 一起工作，但它似乎与使用 $scope.apply() 一样错误> 当您不知道问题出在哪里时在 AngularJS 中。

我的组件.component.ts

import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';

import { HelperService } from 'path';

@Component({
    selector: 'my-selector',
    templateUrl: 'my-component.component.html'
})
export class MyComponent implements OnDestroy, OnInit {
    myValue: string;

    private subscription: Subscription;

    constructor(
        private helperService: HelperService
    ) {
        //
    }

    ngOnInit() {
        this.myValue = 'defaultValue';

        this.subscription = this.helperService.getNewValue$().subscribe((newValue) => {
            console.log('pre', this.myValue);
            this.myValue = newValue;
            console.log('post', this.myValue);
        });
    }

    ngOnDestroy() {
        if (this.subscription !== undefined ) {
            this.subscription.unsubscribe();
        }
    }
}

helper.service.ts

    getNewValue$(): Observable<string> {
        return Observable.fromPromise(this.methodCallingAThirdPartyLibrary());
    }

我的组件.component.html

debug: {{ myValue }}

Answer 1

这是一个有趣的观点:https://stackoverflow.com/a/41241646/1030207

this.methodCallingAThirdPartyLibrary() 正在返回通过调用第三方库的方法返回的 Promise，因此可能一切都在 Angular 的控制之外发生。

明天早上(此处为 23 点 44 分)我将尝试将该内部调用包装到 zone.run