Angular 角度-单击第5个按钮添加ngClass

在连续单击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.css

.white-text{
  color: white;
}

当前，单击第5个按钮后，logItem背景仍为蓝色。我可以检查控制台，看到class.white文本已经添加，但是文本仍然是黑色的

下面是它的外观：

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

---

我对Angular是个新手，我正沿着我的路线走，被困在这里。除非修复此问题，否则我无法继续下一部分。

根据以下内容更改组件定义以包含CSS文件

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

---

在inspector中选择元素并检查其样式，以查看是否有另一个CSS选择器覆盖了

.white text

中设置的颜色。在检查之前，先检查logItem的索引，然后使用硬编码值，如

5==5

Nice catch，但仍然没有更改。文本仍然是黑色的。有什么想法吗？我的错（疏忽），你不能同时拥有样式和样式URL。因此，您必须将样式部分移动到css文件中。我也编辑了我的答案。我想这就成功了。我注释掉了样式URL，并在样式中添加了class.white文本，现在一切都正常了。谢谢你的输入。我实际上可以删除样式，只使用样式URL，一切正常。

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