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

Posted 2023-02-23

【中文标题】Angular - 在第 5 个按钮单击时添加 ngClass

【英文标题】：Angular - add ngClass on 5th button click

【发布时间】：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

【参考方案1】：

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

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

【讨论】：

不错的收获，但仍然没有变化。文字仍然是黑色的。有什么想法吗？

我的错（疏忽），你不能同时拥有样式和 styleUrls。因此，您必须将样式部分移动到 css 文件中。也编辑了我的答案。

我认为这成功了。我注释掉了 styleUrls 并将 .white-text 类添加到样式中，现在一切正常。感谢您的意见。

我实际上可以删除样式并只使用 styleUrls 并且一切正常。