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

counter内部的绑定[ngStyle]称为属性绑定，这意味着每当 Angular检测到值的变化时，它就会一次又一次地观察和评估标签[ngStyle]中的所有内容。（您的误解是值在每个循环中被评估和作用域）<p>countercounter

这就是为什么当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>