如何将ngclass绑定到可观察值

是否可以像这样在Angular中绑定Observable<enum>？如何将ngclass绑定到可观察值

<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 }"

更新原来，这是遗留代码调用角度分量做。这些调用需要的ngZone的环境下运行，否则就没有骑自行车

来源

2017-02-21 jenson-button-event

当然，这应该工作？什么是“MapMode.Pan”？ –

如果这不起作用，也许尝试将其更改为'Oberservable '并在组件代码中的'.map（）'中执行'==='？ –

如果你可以做'this.mapToolBarMode.subscribe'，那么你的绑定可能应该是''（不含'$'） –

也许你错过了你的问题的细节，在我的例子其做工精细：

或者你观察到的是已经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

来源

2017-02-21 17:27:26 mxii

如何将ngclass绑定到可观察值

回答

相关问题