ngStyle 应用于 ngFor 中的所有元素答案

【问题标题】：ngStyle applying to all elements in ngForngStyle 应用于 ngFor 中的所有元素
【发布时间】：2019-12-12 01:53:20
【问题描述】：

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

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

当计数器

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

【问题讨论】：

看看它是否适合你：stackblitz.com/edit/angular-issue-repro2-kjjdkn
this.counter 不是您正在循环的this.clicklog 的一部分。所以this.counter 对this.clicklog 中的所有项目都适用。
谢谢@chaitanya。这就是我一直在寻找的。虽然我找到了替代方法，例如使用以下答案之一中建议的索引，但我的目标是根据我的打字稿文件中的值运行条件。

标签： javascript html angular ngfor ng-style

【解决方案1】：

counter在[ngStyle]中的绑定被称为property binding，这意味着Angular将观察和评估所有[ngStyle]每当它检测到 counter 值发生变化时，一次又一次地在您的 <p> 标记中。（您的误解是 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] 的 TS 中的一个属性来控制它，我看不出有任何理由不使用索引，因为逻辑是改变有长度的项目的样式高于 5
即使我使用索引给出了答案。除了索引，他还需要检查不属于clickLog的counter值@
正如我所见，他想要的理想是在每个 [ngStyle] 中为 couter 提供一个仅评估一次的范围值，由于 Angular 数据绑定机制，这是不可能的，您不需要包含 @如果使用index，他想要的逻辑是987654338@

【解决方案2】：

也许是这个？

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

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

【讨论】：

这在技术上是正确的，但我的目标是使用我的 typescript 类中的值检查条件。

【解决方案3】：

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

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

【讨论】：