2016-09-16 11 views
2

観測可能な変数で* ngIfを使うことに問題があります。基本的にはAngular2 - * ngIfと非同期の観測値

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

をshowDivが最初の場所でに設定されている場合、someObservable負荷を:事は、私が* ngIfで要素を非表示にして、もう一度それを表示する場合、値はそれほどロードされないということです私がを偽に設定し、次にに設定すると、値はロードされません。どうしましたか?

よろしく

答えて

5

UPDATE:彼のヒントのj2L4eへ

おかげで、!

BehaviorSubjectが鍵です!

この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 {} 
+2

'BehaviorSubject'はあなたがここに必要があると思いますものです。それは単一の値をキャッシュします。 – j2L4e

関連する問題