typescript - 使用Observable设置CSS类

请看一下this Plunker example。

    this.obsCount = Observable
      .interval(1000);

你知道如何根据观测到的观测值来设置类吗？
提前谢谢。

最佳答案

您需要使用异步管道才能正常工作。异步管道允许组件模板使用发出的可观察事件进行更新：

<i [ngClass]="{'mod3-0': (obsCount | async) %3 == 0, 'mod3-1' : (obsCount | async) %3 == 1, 'mod3-2': (obsCount | async) %3 == 2 }">CSS CLASS CHANGES</i>

一个简单的app.ts是：

import {Component,Pipe,NgZone} from '@angular/core'
import {Observable} from 'rxjs/Rx'

@Component({
  selector: 'my-app',
  styles: [`
    i { width: 50px height: 100px; }
    i.mod3-0 {border: solid 3px yellow; }
    i.mod3-1 {border: solid 3px orange; }
    i.mod3-2 {border: solid 3px red; }
  `],
  template: `
    <i [ngClass]="{'mod3-0': (obsCount | async) %3 == 0, 'mod3-1' : (obsCount | async) %3 == 1, 'mod3-2': (obsCount | async) %3 == 2 }">CSS CLASS CHANGES</i>
    `
  })
export class App {
  constructor(): void {
    this.obsCount = Observable
      .interval(1000);
  }
}