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

也许是这个？

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

或者你可以用 CSS 来做，如果它总是 5 和 nth-child(n+5)

Answer 2

一次试一试。我没试过，但我认为它会起作用。

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

Answer 3

counter在[ngStyle]中的绑定称为property binding，意思是Angular 会在检测到来自counter 值。（你的误解是 counter 值在每个循环中被评估和作用域）

这就是为什么当 counter 变得高于 5 时，所有 [ngStyle] 都被再次评估并具有样式 backgroundColor:blue。因此，目前无法通过 TS 文件中的属性 counter 来存档您想要的内容。

我建议使用 *ngFor 的索引，它的值在每个循环中被评估和限定范围：

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

ngStyle 适用于 ngFor 中的所有元素

ngStyle applying to all elements in ngFor

html

javascript

ng-style

ngfor

angular