Typescript 使用可观察的

请看一看

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

---

提前感谢。

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

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

CSS类更改

一个简单的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);
  }
}

从'@angular/core'导入{Component，Pipe，NgZone}
从'rxjs/Rx'导入{Observable}
@组成部分({
选择器：“我的应用程序”，
风格：[`
i{宽度：50px高度：100px；}
i、 mod3-0{边框：实心3px黄色；}
i、 mod3-1{边框：实心3px橙色；}
i、 mod3-2{边框：实心3px红色；}
`],
模板：`
CSS类更改
`
})
导出类应用程序{
构造函数（）：void{
this.obscont=可观察
.间隔（1000）；
}
}

似乎在您提供的plunkr中工作；-）那么问题是什么呢？它使用

this.count

变量。我想使用

this.obsCount

来获得更干净、更具反应性的代码：-）

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