angular - 如何将 ngclass 绑定(bind)到一个可观察值

Question

绑定(bind)到 Observable<enum>在 Angular 中可能像这样吗？

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

或

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

哪里mapToolBarMode$是可观察的

随着 observable 的变化，它似乎没有做任何事情。

我认为这可能与构造函数中不可用的值有关，如果我这样做它会起作用，但我真的不想对 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 的上下文中运行，否则就没有循环

Answer 1

也许您在问题中遗漏了一个细节，在我的示例中它工作正常:

或者您的可观察对象已经完成？也许是 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