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

Question

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

这是应用程序上的按钮。组成部分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>

这是应用程序。组成部分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);
  }
}

这是一个应用程序。组成部分css

.white-text{
  color: white;
}

目前，在单击第5个按钮后，logItem背景保持蓝色。我可以检查控制台，看到类。白文本已经添加，但文本仍然是黑色的。

下面是它的外观：

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

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

Answer 1

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

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