Как привязать ngclass к наблюдаемому значению

Question

Является ли привязка к 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 }" 

Update оказывается, что это было связано с унаследованного кода, призывающих угловых компонентов. эти вызовы должны работать под контекстом ngZone, в противном случае нет велосипедного

Answer 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); 
    } 
} 

демо: https://plnkr.co/edit/h0YIPpCh9baJgxCsBQrY?p=preview