时间戳

首页 > 解决方案 > 如何以角度执行与禁用属性的属性绑定？

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

问题描述

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

aaa , 真
bbb , 假
ccc , 假
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”的已知属性

标签： angular

解决方案

您需要一些 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>

推荐阅读