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

Question

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

    <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';
    }

}

我在监督什么...？

Answer 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