web-dev-qa-db-fra.com

Comment lier ngclass à une valeur observable

Est lié à un Observable<enum> possible comme ça en angulaire?

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

ou

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

où mapToolBarMode$ est l'observable

Il ne semble rien faire alors que l'observable mute.

Je pense que cela pourrait être lié à la valeur non disponible dans le constructeur, si je le fais, cela fonctionne, mais je ne veux pas vraiment le faire pour chaque valeur de l'énumération MapMode:

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

...

[ngClass]="{selected: isPanSelected }"

pdate s'avère que cela était dû au code hérité appelant angular. Ces appels doivent être exécutés dans le contexte d'une ngZone, sinon il n'y a pas de cycle

angularrxjsobservable
14
jenson-button-event

Peut-être avez-vous manqué un détail dans votre question, dans mon exemple, cela fonctionne bien:

Ou votre observable est déjà completed? Demande HTTP peut-être?

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

démo en direct: https://plnkr.co/edit/h0YIPpCh9baJgxCsBQrY?p=preview

7
mxii