将* ngIf与可观察变量一起使用时遇到问题。问题是,当我用 * ngIf 隐藏元素并再次显示它时,值将不会加载:
<div *ngIf="showDiv">
{{ someObservable$ | async }}
</div>
基本上,当showDiv在第一个位置设置为 true 时,someObservable会加载,但是当我将其设置为 false 然后再次设置为 true ,价值不会加载。怎么了?
此致
答案 0 :(得分:5)
更新:
感谢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 {}