如何使用css有条件地启用/禁用html中click（）上的表行答案

【问题标题】：How to conditionally enable/disable a table rows on click() in html using css如何使用css有条件地启用/禁用html中click（）上的表行
【发布时间】：2021-09-10 12:09:14
【问题描述】：

我的代码：

组件类：

this.locknumbers = true;
onclick(){
this.locknumbers = false;
}

.disabledRows {
    opacity: 0.5;
    filter: alpha(opacity=50);
    cursor: default;
}

[ngClass]= "{'disableRows':locknumber}".

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

最初它是禁用的，但是当我单击启用按钮时，内容仍然被禁用，但在控制台中我可以看到它的值。锁号变为假；即使样式类是在点击时应用的。

【问题讨论】：

您的模板中有错字，您写的是locknumber 而不是locknumbers。
欢迎来到 Stack Overflow！访问help center，使用tour 了解内容和How to Ask。请首先>>>Search for related topics on SO，如果您遇到困难，请发布您的尝试的minimal reproducible example，并使用[<>] 记录输入和预期输出sn-p 编辑器。

标签： html css angular

【解决方案1】：

css类名disableRows和disabledRows也有错别字。

如果您使用的是 VSCode，请查看扩展“Angular 语言服务”。它可以检测角度分量中的变量名称。它在 CSS 类名部分没有帮助，但它会捕获 locknumber 变量名并在模板中输入。

修正错别字后，您的代码应该没问题。

【讨论】：

【解决方案2】：

为什么不将此代码更好地用于切换按钮

this.locknumbers = true;
onclick(){
this.locknumbers = !this.locknumbers
}

【讨论】：