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;
}

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

它的外观如下：

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

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

Answer 1

按照以下方式更改组件定义以包含 CSS 文件。

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

Answer 2

log : 任意 [ ] = [ ];

这是搜索更具体问题时的另一个解决方案，我会在应得的信用处给予信用。 TypeScript 中的“不可分配给从不类型的参数”错误是什么？

Answer 3

“number”类型的参数不可分配给“never”类型的参数。 [插件角度编译器]

src/app/hand1/hand1.component.ts:21:18:
  21 │     this.log.push(this.log.length + 1);
     ╵                   ~~~~~~~~~~~~~~~~~~~