时间戳

首页 > 解决方案 > 有角度 [ngClass] 动态刷新类（基于服务中更新的数据）

javascript - 有角度 [ngClass] 动态刷新类（基于服务中更新的数据）

问题描述

我有一个这样的模板：

<span [ngStyle]="{'color': s.isDetecting ? 'red' : 'green'}" class="right-icon">
    <i [ngClass]="s.isDetecting ? 'fas fa-eye' : 'fas fa-eye-slash'"></i>
    {{s.detectingStatus}}
</span>

在我的组件中，我基本上有这个：

// ...
@Input() countSensor: PartyInfo = null;

s: DataInfo = null;

ngOnInit(): void {
  this.s = this.countSensor.data;
}

注意：countSensor从父母传递给孩子，并在服务中每隔几秒更新一次。

现在，使用此代码，[ngStyle]可以正常工作，颜色会在应该发生变化时发生变化，对于{{s.detectingStatus}}字符串插值也是如此。但是，该类似乎没有更新[ngClass]：图标始终保持不变。

我怎样才能让我[ngClass]的课程刷新并像这样动态地工作[ngStyle]？

在 SO 和其他地方研究了一段时间后，我尝试了一些事情：

每当我detectChanges()的ChangeDetectorRef服务更新我的countSensor.

但这并没有改变我的行为。

我也尝试async在我的模板中使用，但我无法做到，因为我s.isDetecting的不可观察。有没有一种简单的方法可以将 observable 绑定到该变量？这可能是一个解决方案...

标签： javascriptangularrxjsobservableangular-changedetection

解决方案

您的值将作为输入出现，因此请在 ngOnchanges 中观看，

ngOnChanges(change:SimpleChange) {
  if(change.countSensor) {
    //put your logic here
  }
}

推荐阅读