如何以角度执行与禁用属性的属性绑定？答案

【问题标题】：How to perform property binding with disabled property in angular?如何以角度执行与禁用属性的属性绑定？
【发布时间】：2021-03-17 09:46:05
【问题描述】：

我试图仅打印那些 isDisabled 值为 true 且其余城市的值应处于禁用状态的城市的名称。但我收到了如图所示的错误。
我想要的输出类型是：

啊，真的
bbb , 假的
抄送，假
ddd，假的

第一个应突出显示，其余应禁用。

HTML 文件：

<tr *ngFor="let x of cities;let i=index">
<td [disabled]="isDisabled[i]">
    <tr>{{x.name}} , {{isDisabled[i]}}</tr>
</td>

.ts 文件：

cities = [{ name: "aaa" }, { name: "bbb" }, { name: "ccc" }, { name: "ddd" }];
isDisabled=[true, false, false, false]

模板解析错误：无法绑定到“禁用”，因为它不是“td”的已知属性

【问题讨论】：

确实，disabled 不允许在 <td> 标签上。它适用于输入/选择等......那么“禁用”是什么意思？如果您想要不同的文本颜色、粗体或其他任何颜色，请改用 CSS 类：[ngClass]="{'my-disabled': isDisabled[i]}"。
通过禁用我的意思是文本应该出现，但它会被禁用（意思是关闭颜色）。 my-disabled 是 .ts 文件中的变量吗？
这里没有魔法。你想要的效果在<input> 标签上处理得很好。但是您没有在 HTML 中使用任何 <input> 标记，因此您不能使用它。您必须使用 CSS 类手动完成。所以在我的例子中，my-disabled 是一个自定义 CSS 类，你必须在你的 CSS 文件中定义你想要应用到它的样式（所以可能是一个color: gray）。

标签： angular

【解决方案1】：

你需要一些 css 代码来解决你的问题：

td.disabled {
    font-weight: bold;
    cursor: not-allowed;
}

将此样式附加到您的代码中，您可以执行以下操作：

<tr *ngFor="let x of cities;let i=index">
<td [class.disabled]="isDisabled[i]">
    {{x.name}}, {{isDisabled[i]}}
</td>
</tr>

【讨论】：