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

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

的绑定(bind)counter 里面 [ngStyle] 称为 property binding这意味着 Angular 将观察并评估所有 [ngStyle] 在你的 <p> 每当检测到来自 counter 的更改时，就会一次又一次地标记 值。(你的误解是 counter 值在每个循环中被评估和作用域)

那为什么当 counter 变得高于 5，所有 [ngStyle] 再次计算并具有样式 backgroundColor:blue 。因此目前没有办法只用一个属性 counter来归档你想要的东西。 来自您的 TS 文件。

我建议使用 *ngFor 的索引，它的值在每个循环中被评估和作用域:

<p
  *ngFor="let log of clickLog; let indexOfElement = index;"
  [ngStyle]="{'background-color': (indexOfElement >= 4) ? 'blue' : ''}">
  {{ log }}
</p>