我在将 *ngIf 与可观察变量一起使用时遇到问题。问题是,当我隐藏元素时*ngIf,然后再次显示,值将不会加载,因此:
<div *ngIf="showDiv">
{{ someObservable$ | async }}
</div>
基本上当 showDiv 设置为true首先,加载了 someObservable,但是当我将其设置为false然后再次到true,值不会加载。怎么了?
Regards
UPDATE:
感谢 j2L4e 的提示!
BehaviorSubject
是关键!
看看这个笨蛋:
https://plnkr.co/edit/whkrQk3tHCJCvvi6rlaE?p=info 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 {}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)