Observable<enum>Angular ではこのようにバインディングすることは可能ですか?
<a [ngClass]="{selected: (mapToolBarMode$ | async) === 0 }" />
または
<a [ngClass]="{selected: (mapToolBarMode$ | async) === MapMode.Pan }" />
mapToolBarMode$観測可能なものはどこにあるか
観測可能なものが変化しても何も起こらないようです。
これはコンストラクターで値が利用できないことに関係していると思います。これを実行すると機能しますが、MapMode 列挙型のすべての値に対してこれを実行することは実際には望ましくありません。
private mapModes: typeof MapMode = MapMode;
private isPanSelected = true;
ngOnInit() {
this.mapToolBarMode.subscribe(v => {
this.isPanSelected = (v === this.mapModes.Pan);
})
}
...
[ngClass]="{selected: isPanSelected }"
アップデートこれは、Angularコンポーネントを呼び出すレガシーコードに関係していることが判明しました。これらの呼び出しはngZoneのコンテキストで実行する必要があります。そうしないと循環が起こりません。
ベストアンサー1
質問の詳細を見逃したかもしれませんが、私の例では問題なく動作しています。
それとも、あなたの観測可能オブジェクトはすでにcompleted? HTTP リクエストでしょうか?
@Component({
selector: 'my-app',
template: `
<div>
<h2 (click)="toggle()"
[ngClass]="{selected: (mapToolBarMode$ | async) === 0 }"
>
Hello {{name}}, click to toggle color
</h2>
</div>
`,
styles: [
'.selected { color: red; }'
]
})
export class App {
name:string;
mapToolBarMode$ = new Subject();
constructor() {
this.name = 'Angular2'
}
private _curState = 1;
toggle() {
if (++this._curState > 1) this._curState = 0;
this.mapToolBarMode$.next(this._curState);
}
}