如何对 angular 中的禁用属性执行属性绑定？

Question

I was trying to print the names of only those cities for which the isDisabled value is true and the rest of the cities' values should be in a disabled state. But I am getting errors as shown.
The kind of output i want is:

aaa, true
bbb, false
ccc, false
ddd, false

the first one should be highlighted and rest shoud be disabled.

HTML file:

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

.ts file:

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

Template parse errors: Can't bind to 'disabled' since it isn't a known property of 'td'

Answer 1

You need some css code to solve your problem:

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

Attaching this style to your code you can do the following:

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