使用 Observable 设置 CSS 类

Question

请看一下这个 Plunker 示例。

    this.obsCount = Observable
      .interval(1000);

你知道如何根据obsCount Observable 设置类吗？

提前致谢。

Answer 1

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

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