ngclassを観測可能な値にバインドする方法

Question

このようにAngularでObservable<enum>にバインドされていますか？

<a [ngClass]="{selected: (mapToolBarMode$ | async) === 0 }" /> 

またはmapToolBarMode$は観測変異するように何かをするように見えるdoes notの観測可能

ある

<a [ngClass]="{selected: (mapToolBarMode$ | async) === MapMode.Pan }" /> 

。

は、私はそれは私がこれを行う場合、それは動作しますが、値はコンストラクタで利用されていないに関係することができると思いますが、私は本当にいけないMapMode列挙型のすべての値のためにそれを行うにしたい：

private mapModes: typeof MapMode = MapMode; 
private isPanSelected = true; 
ngOnInit() { 
    this.mapToolBarMode.subscribe(v => { 
     this.isPanSelected = (v === this.mapModes.Pan); 
    }) 
} 

...

[ngClass]="{selected: isPanSelected }" 

更新 が、これは従来のコードを呼び出す角度成分と関係していたが判明しました。

またはあなたの観測可能ですでにcompleted次のとおりです。これらの呼び出しは、そうでなければ、サイクリング

Answer 1

はありませんたぶん、あなたはそのが正常に動作して私の例では、あなたの質問に詳細を逃し、ngZoneのコンテキストで実行する必要がありますか？おそらく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); 
    } 
} 

ライブデモ：https://plnkr.co/edit/h0YIPpCh9baJgxCsBQrY?p=preview