Angular-在第5个按钮上添加ngClass

Question

在一系列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;
}

当前，单击第五个按钮后，logItem背景保持蓝色。我可以检查控制台，看到已添加了.white-text类，但文本仍为黑色。

这是它的外观：

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

我是Angular的新手，我正在接受udemy课程，并被卡在这里。除非解决此问题，否则我无法继续进行下一部分。

Answer 1

按照以下说明更改组件定义以包含CSS文件。

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