Question

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

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

当计数器为<= 4时，所有元素均未达到预期的样式。问题是：一旦计数器达到5，所有元素就会呈现蓝色背景。我的意图是只有元素5+具有背景。

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

Answer 1

couter 中 [ngStyle] 的绑定称为property binding，这意味着Angular将观察并评估所有 {每当您从 [ngStyle] 值中发现更改时，就一次又一次地在您的 <p> 标记中添加{1}} 。（您的误解是在每个循环中评估和确定 couter 值的范围

为什么当 couter 高于5时，所有 couter 都会重新评估并具有 {{1} } 。因此，当前无法通过TS文件中的一个属性 [ngStyle] 来存档所需的内容。

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

backgroundColor:blue

Answer 2

尝试一下。我没有尝试过，但我认为它会起作用。

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

Answer 3

也许是吗？

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

或者，如果nth-child(n+5)始终为5，则可以使用CSS做到这一点

ngStyle应用于ngFor中的所有元素

3 个答案: