Angular - 在第 5 个按钮单击时添加 ngClass答案

【问题标题】：Angular - add ngClass on 5th button clickAngular - 在第 5 个按钮单击时添加 ngClass
【发布时间】：2019-05-04 08:09:44
【问题描述】：

在连续点击 5 次按钮后尝试将 ngClass 添加到 div。

这是位于 app.component.html 文件中的按钮：

<button class="btn btn-primary" (click)="onToggleDetails()">Display Details</button>

<p *ngIf="showSecret">Secret Password = tuna</p>

<div *ngFor="let logItem of log" 
  [ngStyle]="{backgroundColor: logItem >= 5 ? 'blue' : 'transparent'}"
  [ngClass]="{'white-text': logItem >= 5}"
>{{ logItem }}</div>

这里是 app.component.ts 文件：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'], *** EDIT ***
  styles: [`
  h3 {
    color: dodgerblue;
  }
  `]
})
export class AppComponent {
  username1 = '';
  showSecret = false;
  log = [];
  onToggleDetails(){
  this.showSecret = !this.showSecret;
  this.log.push(this.log.length + 1);
  }
}

这里是 app.component.css

.white-text{
  color: white;
}

目前，单击第 5 次按钮后，logItem 背景仍为蓝色。我可以检查控制台并看到 .white-text 类已添加，但文本仍为黑色。

这是它的外观：

当我检查元素时，您可以看到已添加类：

我是 Angular 的新手，我正在学习 udemy 课程并被困在这里。除非我解决这个问题，否则我无法进行下一部分。

【问题讨论】：

在检查器中选择元素并检查其样式，看看是否有另一个 CSS 选择器覆盖了 .white-text 中设置的颜色。
改为检查 logItem 的索引
在此之前检查硬编码值，如5===5

标签： angular typescript

【解决方案1】：

按照以下更改您的组件定义以包含 CSS 文件。

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.cs']
  })

【讨论】：

不错的收获，但仍然没有变化。文字仍然是黑色的。有什么想法吗？
我的错（疏忽），你不能同时拥有样式和 styleUrls。因此，您必须将样式部分移动到 css 文件中。也编辑了我的答案。
我认为这成功了。我注释掉了 styleUrls 并将 .white-text 类添加到样式中，现在一切正常。感谢您的意见。
我实际上可以删除样式并只使用 styleUrls 并且一切正常。