如何在angular中使用禁用的属性执行属性绑定

Question

我试图只打印那些isDisabled值为true的城市的名称，而其他城市的值应该处于禁用状态。但如图所示，我出现了一些错误
我想要的输出类型是：

aaa，true
bbb，false
ccc，false
ddd，false

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

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]

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

Answer 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>