只有在移动鼠标后，Angular组件才会在视图中更新变量

Question

问题

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

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

• 我重新加载页面，保持鼠标静止
• 我可以在控制台中看到更新的值
• 该模板仍会显示＆＃39; defaultValue＆＃39;值
• 我移动鼠标，模板显示我在控制台中看到的更新值。

我设法让它与ChangeDetectorRef和.detectChanges()一起使用，但是当您不知道AngularJS中的$scope.apply()时，它似乎是错误的问题

MY-component.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());
    }

MY-component.component.html

debug: {{ myValue }}

Answer 1

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

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

明天早上（这里是23.44）我会尝试将内部呼叫包装成zone.run

Answer 2

由于我无法实现您的服务，我在下面的代码中进行了记录，以便在使用ngDoCheck和ChangeDetectionStrategy进行组件更改时进行记录，如下所示

import {Component, NgModule ,ChangeDetectionStrategy,ngDoCheck} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser'
import {FormsModule} from '@angular/forms';
@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
        <input [(ngModel)]="someValue" />
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class App implements ngDoCheck {
  someValue:any;
  name:string;
  constructor() {
    this.name = 'Welcome to Change Detection Demo'
  }
  ngDoCheck(){
    console.log(this.someValue);

    }
}

我使用了一个文本框来检测组件中的更改。

<强> LIVE DEMO