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

【问题标题】：Having angular [ngClass] refresh classes dynamically (based on data updated in a service)有角度 [ngClass] 动态刷新类（基于服务中更新的数据）
【发布时间】：2021-04-22 15:32:51
【问题描述】：

我有一个这样的模板：

<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 和其他地方研究了一段时间后，我尝试了一些方法：

每当我的服务更新我的countSensor 时，使用传递给构造函数的ChangeDetectorRef 中的detectChanges() 方法手动触发组件更改检测。

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

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

【问题讨论】：

s.isDetecting 包含的值是什么？你只是想验证一个属性是否存在？
如果countSensor 在服务中，则不需要将其从父母传递给孩子。只需直接从服务中引用它：{{ theService.countSensor }}。这就是服务的用途，它们是单例的。
问题是我的服务中有很多countSensor，它们都显示在一个特定的组件中。我想我可以改为传递它的Id，然后从服务中检索正确的countSensor，看看会发生什么。但我当前的传感器实际上已经在引用服务中的传感器。我认为这里的问题很可能与ngClass 没有刷新类有关，值都正确更新了）

标签： javascript angular rxjs observable angular-changedetection

【解决方案1】：

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

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

【讨论】：