HTML中用CSS实现点击条件启用/禁用表格行 ngClass不生效如何解决

你的代码存在3处大小写/拼写不匹配，导致样式绑定逻辑失效：

• 变量名不匹配：组件类中定义的控制变量为locknumbers（末尾带s），但模板[ngClass]绑定中写的是locknumber（少了末尾的s）
• 样式类名不匹配：CSS中定义的禁用类为disabledRows（disable是过去式，末尾带d），但[ngClass]中写的是disableRows（少了末尾的d）
• 方法名大小写不匹配：组件类中定义的点击处理方法为全小写onclick，但模板绑定的是onClick（首字母C大写），JS大小写敏感，方法名不匹配会导致事件触发异常

1. 组件类代码 #

this.locknumbers = true;
// 方法名和模板绑定保持一致
onClick(){
  this.locknumbers = false;
  // 如果需要支持点击切换启用/禁用，可以改成 this.locknumbers = !this.locknumbers
}

2. CSS代码（基础逻辑无需修改，可按需补充优化属性） #

.disabledRows {
    opacity: 0.5;
    filter: alpha(opacity=50);
    cursor: default;
    /* 可选补充：完全禁止行内元素交互，避免禁用状态下仍能点击行内按钮/输入框 */
    /* pointer-events: none; */
}

3. 模板代码 #

<!-- 表格行的ngClass绑定修正类名和变量名 -->
<tr [ngClass]= "{'disabledRows': locknumbers}">
  <!-- 表格行原有内容 -->
</tr>

<a  (click)="onClick()"> Enable </a>

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