Question

请查看this Plunker example。

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

使用Observable设置CSS类

1 个答案: