Angular2 - * ngIf und Async Observables

Question

Ich habe Probleme mit der Verwendung von * ngIf mit beobachtbaren Variablen. Die Sache ist die, dass, wenn ich Element verstecken mit * ngIf, und es zeigen wieder, Werte nicht so laden:

 <div *ngIf="showDiv"> 
      {{ someObservable$ | async }} 
     </div> 

Grundsätzlich, wenn showDiv zu wahr an erster Stelle, die someObservable Lasten gesetzt , aber wenn ich es auf false und dann wieder auf true setzen, wird der Wert nicht geladen. Was ist los mit dir?

Grüße

Answer 1

UPDATE:

Dank j2L4e, für seinen Hinweis!

BehaviorSubject ist der Schlüssel!

Sehen Sie diese Plunker:

https://plnkr.co/edit/whkrQk3tHCJCvvi6rlaE?p=info

import {Component, NgModule} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 

import { Subject, BehaviorSubject } 'rxjs/Rx'; 
//import { Observable, Subject } from 'rxjs'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2 (click)="showMe = !showMe">Hello {{name}}</h2> 
     <br /> 

     <div *ngIf="showMe"> 
     sbj1: {{ _subj1 | async }} 
     </div> 

     <div *ngIf="showMe"> 
     obs1: {{ _obs1 | async }} 
     </div> 

     <div *ngIf="showMe"> 
     obs2: {{ _obs2 | async }} 
     </div> 
    </div> 
    `, 
}) 
export class App { 

    private showMe = false; 

    private _subj1 = new BehaviorSubject<string>(); 
    private _subj2 = new Subject<string>(); 
    private _obs1 = this._subj1.asObservable(); 
    private _obs2 = this._subj2.asObservable(); 

    constructor() { 
    this.name = 'Angular2' 

    this._subj1.next('in constructor'); 
    } 

    ngAfterViewInit() { 
    this._subj2.next('after view init..'); 
    } 
} 

@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ App ], 
    bootstrap: [ App ] 
}) 
export class AppModule {}