javascript - ngStyle应用于ngFor中的所有元素

我正在尝试配置此Angular / Html / JS，以便计数器> = 5时元素开始具有蓝色背景

<p
  *ngFor="let log of clickLog"
  [ngStyle]="{backgroundColor: counter >=5 ? 'blue' : 'transparent'}">
  {{ log }}
</p>

当计数器
编辑：我知道我可以使用ngFor循环中的索引值作为替代解决方案。我特别好奇为什么这种方法行不通。

最佳答案

couter在[ngStyle]内的绑定称为property binding，这意味着Angular每当检测到[ngStyle]值的变化时，就会一次又一次地观察和评估<p>标记中的所有couter。（您的误解是在每个循环中评估couter值并确定其范围）

这就是为什么当couter高于5时，将重新评估所有[ngStyle]并具有样式backgroundColor:blue的原因。因此，当前无法通过TS文件中的一个属性couter来存档所需的内容。

我建议使用* ngFor的索引，该索引的值在每个循环中进行评估并确定范围：

<p
  *ngFor="let log of clickLog; let i = index"
  [ngStyle]="{backgroundColor: i >=4 ? 'blue' : 'transparent'}">
  {{ log }}
</p>