ビューが更新されないのはなぜですか？あなたが見ることができるように、以下のコードで

Question

は、私が観測可能に加入し、コールバックに私はresultの値にステータスを設定しました。これは、ビューの* ngIfで使用されます。真実が返されても、ビューは更新されません。

export class AppComponent { 

    private status; 

    constructor (private proxyService: ProxyService) { 

    } 

    ngOnInit(){ 
    //setInterval(()=>console.log(this.isInjected),1000); 
    this.proxyService.someObservable.subscribe((result)=>{ 
     this.status = result; 
     console.log(result); 
    }); 
    } 

} 

ここで、コメント行が表示される場合があります。デバッグ中に私はそれを追加しました。変わったことはビューを更新することです。なぜどんなアイデア？参考のため

は、それが私の見解です：

<div *ngIf="status"> 
    <app-userlane-inject></app-userlane-inject> 
    </div> 
    <div *ngIf="!status"> 
    <span>Status is false.</span> 
    </div> 
{{status}} 

子コンポーネントがレンダリングされることはありませんし、文字列の補間は偽のまま場合でも、コンソールログ（間隔がある場合、それは作品を除く）真。ここで

サービスは広い意味で何をするかです：

var mySubject= new BehaviorSubject(false); 


@Injectable() 
export class ProxyService { 
    public someObservable= mySubject.asObservable(); 


//Kinda deep callback tree, then finally 
    mySubject.next(true) 

} 

Answer 1

クラス外でmySubjectを初期化すると、Angularsゾーン外で実行されるため、Angularがイベントを認識できなくなり、変更の検出が実行されなくなります。

@Injectable() 
export class ProxyService { 
    private mySubject= new BehaviorSubject(false); 
    public someObservable= this.mySubject.asObservable(); 


//Kinda deep callback tree, then finally 
    this.mySubject.next(true) 
} 

更新

あなたは

constructor(private zone:NgZone) {} 

this.zone.run(()=> this.mySubject.next(true)); 

を使用することができますが、これはあなたの問題を解決した場合、いくつかのイベントまたはコールバックがあるコールチェーンで間違った何かが、おそらくそこにありますAngularsゾーン内では起こらない。

Answer 2

観測を表示するための最良の方法は、それらを表示するには、ダムのコンポーネントを作成することです。

例：

this.statusが観察

がそれを表示するダムコンポーネントを作成している場合

。

//dumb component to display status 

    @Component({ 
     selector: 'dumb-display-comp', 
     template: '{{ status }}' 
    }) 
    export class DumbDisplayComp { 
     @Input() status: any; 
    } 

親コンポーネントでダムコンポーネントを使用し、非同期パイプでオブザーバブルを入力として送信します。

あなたの親テンプレートアプリは、あなたの主なものをdeclutterするダムのコンポーネントで満たされるべき

<dumb-display-comp [status]="status | async" ></dumb-display-comp> 

ダムコンポーネントを使用しました。 ちょうど私の2セントです。