Angular中输入框blur事件设置背景CSS不生效，求正确实现方法

你的代码问题在于使用了AngularJS的ng-class指令，但Angular（TypeScript版本为Angular 2+）并不支持该指令，需要改用Angular的属性绑定语法，同时配合组件类变量控制样式切换。以下是完整修复方案：

1. 修正模板代码 #

将ng-class替换为Angular的[ngClass]属性绑定，绑定组件内的布尔变量来控制类的显示：

<input 
  nz-input 
  placeholder="Type here"  
  [ngClass]="{red: isBlurred}" 
  (blur)="onInputBlur(data, $event)" 
  [value]="data.invoiceNum" 
  style="width:200px" 
/>

2. 组件类添加控制逻辑 #

在组件的TypeScript文件中定义控制变量，并在blur事件中切换状态：

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent {
  isBlurred = false;
  data = { invoiceNum: '' }; // 根据实际业务赋值

  onInputBlur(data: any, event: Event): void {
    this.isBlurred = true;
    // 保留你原有的UpdateInvoice业务逻辑
    // this.UpdateInvoice(data, event);
  }

  // 可选：若需要聚焦时恢复背景色，添加focus事件处理
  onInputFocus(): void {
    this.isBlurred = false;
  }
}

3. 调整CSS确保生效 #

如果nz-input的默认样式优先级较高，可通过更具体的选择器提升自定义样式优先级：

/* 基础样式 */
.red {
  background-color: red;
}

/* 针对nz-input的高优先级样式（若基础样式不生效则启用） */
input.red {
  background-color: red !important;
}

核心要点说明 #

• Angular 2+ 使用[ngClass]进行类绑定，通过方括号实现组件变量与模板的双向关联。
• 必须在组件类中定义布尔变量（如isBlurred），用于触发样式类的切换。
• 若遇到样式被覆盖的情况，优先使用更具体的选择器（如input.red），必要时再用!important强制生效。

内容的提问来源于stack exchange，提问作者core114