angular – 如何将ngclass绑定到可观察值

发布时间：2020-12-17 08:47:56 所属栏目：安全来源：网络整理

导读：绑定到Observable enum在Angular中可能是这样的吗？ a [ngClass]="{selected: (mapToolBarMode$| async) === 0 }" / 要么 a [ngClass]="{selected: (mapToolBarMode$| async) === MapMode.Pan }" / 其中mapToolBarMode $是可观察的它似乎没有做任何事情,因

绑定到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 }"

更新
事实证明,这与调用角度组件的遗留代码有关.那些调用需要在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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!