angular: 使用 ngFor 为段落设置不同的颜色

Question

当我点击一个按钮时，我将字符串添加到一个数组中，我需要在页面中显示这些字符串。但是我只需要在第 5 个元素之后显示红色文本（前 5 个元素应该有黑色文本）。这是我尝试过的：

组件代码：

import { Component } from '@angular/core';

@Component({
  selector : 'app-toggle',
  templateUrl : './toggle.component.html',
  styleUrls : ['./toggle.component.css']
})
export class ToggleComponent {
  toggleState = false;
  clickNumber = 0;
  actions = [];
  action = 'Display';

  onClick() {
    this.clickNumber++;
    this.toggleState = !this.toggleState;

    if (this.toggleState) {
      this.action = 'Display';
    } else {
      this.action = 'Hide';
    }
    this.actions.push('click number: ' + this.clickNumber.toString() + ', changed the state to ' + this.action);
  }

  getColor(): string {
    if (this.clickNumber > 5) {
      return 'red';
    } else {
      return 'black';
    }
  }
}

和html代码：

<button (click)="onClick()" >{{action}} details</button>
<p *ngIf="toggleState">Password details: secret</p>
<p *ngFor="let act of actions" [ngStyle]="{'color' : getColor()}">{{act}}</p>

但我的问题是，在我点击超过 5 次之后，所有段落元素的文本颜色都发生了变化。那么如何实现呢？我做错了什么？我正在使用 angular 6.

这是我的页面的样子：

Answer 1

您可以像这样使用 *ngFor 的索引属性和 ngStyle：

<p *ngFor="let act of actions; let i = index" [ngStyle]="{'color' : i > 5 ? 'red' : 'black'}">{{act}}</p>

Answer 2

使用条件 >5 的 ngStyle

<p *ngFor="let act of actions; let i = index" [ngStyle]="{'color' : i > 5 ? 'red' : 'black'}">{{act}}</p>

Answer 3

如果我可以建议一个更简单的 css 解决方案，使用 nth-child

p:nth-child(n+6) {
  color: red;
}

<p>
Foo
</p>
<p>
Foo
</p>
<p>
Foo
</p>
<p>
Foo
</p>
<p>
Foo
</p>
<p>
Foo
</p>
<p>
Foo
</p>
<p>
Foo
</p>

Answer 4

Fix - 1 : Modify getColor() function

传递当前索引值，否则clicknumber为6

时所有元素都一样

 getColor(current): string {
    if (current > 5) {
      return 'red';
    } else {
      return 'black';
    }
  }

HTML

<button (click)="onClick()" >{{action}} details</button>
<p *ngIf="toggleState">Password details: secret</p>
<p *ngFor="let act of actions;let i = index" [ngStyle]="{'color' : getColor(i)}">{{act}}</p>

工作示例：stackblitz

angular: 使用 ngFor 为段落设置不同的颜色

angular: set different color to paragraphs with ngFor

javascript

typescript

ng-style

angular