Typescript 在rxjs流上接收到字符串时更改类

我有一条流，它发出一个字符串。 根据此字符串，我希望将以下类添加到标记中：

• “ok”->fa检查
• “加载->旋转fa旋转器
• “错误”->fa次

我在angular2中试验[class.className]，但没有任何成功

@Component({
    selector: '[event-spinner]',
    template: `
            <i class="fa fa-2x" [class.fa-spinner]="icon == 'loading'" id="spin"></i>
  `
  // the following doesn't work as well
  //directives: [NgClass],
  //template: `
  //<div class="col-xs-5">
  //  <i class="fa fa-2x" [ngClass]="{'fa-check': icon == 'ok', 'fa-spin': icon == 'loading', 'fa-spinner': icon == 'loading', 'fa-times': icon == 'error'}" id="spin"></i>
  //</div>
  //`
})
export class EventSpinner {
    icon: string = "ok";

    constructor(public eventsService: EventsService) {
        //eventsService.icons.subscribe((x) => {
        //    this.icon = x;
        //});
    }
}

@组件({
选择器：“[事件微调器]”，
模板：`
`
//下面的方法也不管用
//指令：[NgClass]，
//模板：`
//
//  
//
//`
})
导出类事件微调器{
图标：string=“ok”；
构造函数（公共事件服务：事件服务）{
//eventsService.icons.subscribe（（x）=>{
//this.icon=x；
//});
}
}

@组件({
选择器：“[事件微调器]”，
模板：`
`
})

---

我已经使用了您的解决方案（请参见更新的问题），但我遇到以下错误：

异常：TypeError:cannotreadproperty'Symbol（Symbol.iterator）我添加了一个Plunker示例。您必须打开浏览器devTools并找到
元素才能看到效果。好的，谢谢，我的应用程序中肯定有其他错误。谢谢！
@Component({
    selector: '[event-spinner]',
    template: `
<i class="fa fa-2x" [ngClass]="{'fa-check': icon == 'ok', 'fa-spin': icon == 'loading', 'fa-spinner': icon == 'loading', 'fa-times': icon == 'error'}" id="spin"></i>
  `
})