角度：使用 ngFor 为段落设置不同的颜色答案

【问题标题】：angular: set different color to paragraphs with ngFor角度：使用 ngFor 为段落设置不同的颜色
【发布时间】：2018-12-16 11:46:16
【问题描述】：

当我点击一个按钮时，我将字符串添加到一个数组中，我需要在页面中显示这些字符串。但我只需要在第 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 次后，所有段落元素都会更改文本颜色。那么如何实现呢？我做错了什么？我正在使用角度 6。

这是我的页面的外观：

【问题讨论】：

标签： javascript angular typescript ng-style

【解决方案1】：

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

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

【讨论】：

我认为不需要 =！反正你是最快的
因为它们都使用相同的属性，即clickNumber。如果一个人 > 5，那么他们都必须 > 5
那么当添加一个新项目时，整个 html 会重新创建吗？因为我坚持只添加了新元素，其余的都来自之前的点击
运行changeDetection时，会为每个元素再次调用getColor()
@BudaGavril ，当 clickNumber 为 6 时，所有元素都会调用值为 6 的函数。所以它们都变红了。但是，如果您在调用时传递当前元素的值，您将获得所需的输出。您也可以查看我的答案以进一步澄清:) 但这是 user184994 的标准解决方案

【解决方案2】：

使用条件>5的ngStyle

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

【讨论】：

【解决方案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>

【讨论】：

连续投票者，你还好吗？惊人的点击速度。 :D

【解决方案4】：

修复 - 1 : 修改 getColor() 函数

传递当前索引值，否则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

【讨论】：