css属性应用于ngFor上Angular 4中的ngStyle的错误元素

Posted 2023-02-22

【中文标题】css属性应用于ngFor上Angular 4中的ngStyle的错误元素

【英文标题】：css property applied to wrong element with ngStyle in Angular 4 on ngFor

【发布时间】：2017-10-18 19:20:35

【问题描述】：

我正在尝试更改从第 4 个按钮单击我的 component.html 中动态添加到元素数组的元素的背景颜色，如下所示：

    <button class="btn" (click)="toggleContent()">Display Details</button>

    <div class="left-align left-div">
      <div class="center-align" *ngFor="let counter of count" >
        <p [ngStyle]="backgroundColor: blueBackground()" [ngClass]="whitetext: counter > 4"> counter </p>
      </div>
    </div>

在第 5 次单击后，数组中的所有元素都会获得彩色背景，而不是那些在计数器超过 4 后添加的元素。同时 ngClass 指令在相同条件下运行良好，只有文本第 5 次单击后的元素变为白色。这是我的component.ts：

import  Component  from '@angular/core';

@Component(
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: [`
    .outer-div 
      height: 20px;
      margin: 20px;
    
    .left-div 
      width: 50px;
      margin-top: 5px;
    
    .inner-div 
      border: 2px solid lightblue;
      height: 20px;
      margin: 20px;
    
    .whitetext 
      color: white;
    
  `]
)
export class AppComponent  

    count = [];
    counter: number = 0;

    toggleContent() 
      this.counter ++;
      this.count.push(this.counter);
    

    blueBackground() 
      return (this.counter > 4) ? 'lightblue' : 'white';
    

我在监督什么……？

【问题讨论】：

所以你只想要第 5 个元素的蓝色背景？

是的，从第五个元素开始的所有后续元素。

【参考方案1】：

问题是当您编写<p [ngStyle]="backgroundColor: blueBackground()".. 并增加this.counter 时，它将影响所有元素，因为每个更改检测滴答都会更新所有具有此绑定的当前元素。因此，当计数器大于 4 时，每个元素都会自行更新。

您可以利用ngFor 的index 属性，而不是手动更新您的计数器。

例子：

<div class="center-align" *ngFor="let counter of count;let i = index" >
      <p [ngStyle]="'backgroundColor': (i+1 > 4) ? 'lightblue' : 'white'" [ngClass]="whitetext: counter > 4"> counter </p>
</div>

Plunker 示例：http://plnkr.co/edit/QECx8Jd2nP8PnrqzcD89?p=preview

【讨论】：

行得通！但是通过函数更新它有什么问题呢？我不能完全把我的手指放在它上面。

@AndreyK 当您将方法绑定到您的 p 元素时，这不是一次性的。他们将等待this.counter 更改。您需要为每个元素设置一个特定的标志，以便将它们与其他元素区分开来；像一个 id （在这种情况下是索引）。有了你所做的，你基本上是说这个循环内的所有p 元素都绑定到this.counter 字段，当它高于 4 时，将 backgroundColor 更改为浅蓝色。因此他们这样做:-)

非常感谢您的解释。我现在明白了，这与在没有方法的情况下使用 ngStyle 和 ngClass 是不同的。