小编Red*_*ree的帖子

我正在尝试更改动态添加到元素数组中的元素的背景颜色,点击我在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: …