角度コンポーネントは、マウスを移動した後にのみ表示される変数を表示します。

Question

問題は

です。

Observableを購読しているコンポーネントがあります。 myValueの値は、ブラウザウィンドウ上でマウスを動かすと、テンプレート内で更新されます。

最も奇妙なことは、2つがconsole.logで正常に動作していることです。

• 私はテンプレートがまだ私はマウスを動かす
• 「はdefaultValue」の値を示しており、テンプレートショーコンソール
• に更新された値を見ることができます
• 静的マウスを保つページをリロード更新された値はすでにコンソールで表示されていました。

は、私はそれがChangeDetectorRefと.detectChanges()で動作させることに成功し、それが問題だ場所がわからないときAngularJSで$scope.apply()を使用してのように間違っているようです。

私-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()); 
    } 

私-component.component.html

debug: {{ myValue }} 

Answer 1

は興味深いポイントだ：https://stackoverflow.com/a/41241646/1030207

this.methodCallingAThirdPartyLibrary()は約束を返しているので、多分、すべてが角度の制御外で何が起こっているサードパーティのライブラリのメソッドへの呼び出しによって返されました。

明日の朝（ここでは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