Angular 2 attr.disabled 未按预期运行答案

【问题标题】：Angular 2 attr.disabled not behaving as expectedAngular 2 attr.disabled 未按预期运行
【发布时间】：2018-10-21 18:43:57
【问题描述】：

我有一个要显示的项目列表，每个项目旁边都有一个复选框。我有一个条件语句来检查是否应该禁用或启用每个项目的复选框。由于某些不清楚的原因，我列表中的每个复选框都被禁用，我不确定这是我设置 [attr.disabled] 的方式还是条件语句中的错误。

这是我的html：

 <input class="form-control" [attr.disabled]="disabled == true ? true : null"
     type="checkbox"[checked]="item.status" (click)="itemChecked($event, item)" />

在我的组件中：

private disabled: boolean;

for( let item of items){
if (item.id == Status.required) {
                item.status = true;
                this.disabled= true;
            } else if (item.id != Status.required && item.list.length > 0) {
                item.status = item.id == Status.checked
                this.disabled= false;
            } else {
                item.status = item.id == Status.unchecked;
                this.disabled= false;
            }
    }

目前在我的列表中，无论我的项目状态如何，所有复选框都被禁用，不知道为什么。

【问题讨论】：

你在 ngFor 中使用这个代码吗？
@NanditaAroraSharma 是的
您在组件中使用 this.disabled=true/false。在组件中保留 item.disabled=true/false。您的代码仅保留该组件的禁用副本。您需要为每个项目类型对象保持禁用
@NanditaAroraSharma 你这么说是因为我已经声明 this.disabled 它在基于最后一项的 html 中被覆盖？
是的，这正是我要说的

标签： angular checkbox

【解决方案1】：

感谢@NanditaAroraSharma，我能够意识到每次列表项的状态更改时都会覆盖 this.disabled，从而反映列表的最后状态并将其应用于所有项目。我更新了我的[attr.disabled] = "item.id == 1 ? true : null"，现在只禁用了真正应该禁用的项目。

【讨论】：

【解决方案2】：

试试这个

<input class="form-control" [ngClass]="{'disableDiv': disabled  === true}" 
     type="checkbox"[checked]="item.status" (click)="itemChecked($event, item)" />

在css中

.disableDiv {
        pointer-events: none;
    }

【讨论】：

【解决方案3】：

试试这个[disabled]

<input class="form-control" [disabled]="disabled == true ? true : null"
 type="checkbox"[checked]="item.status" (click)="itemChecked($event, item)" />

【讨论】：