Angular 2 attr.disabled ведет себя не так, как ожидалось

Question

У меня есть список элементов для отображения, и рядом с каждым элементом есть флажок.У меня есть условие условия, чтобы проверить, должен ли флажок каждого элемента быть отключен или включен.По какой-то непонятной причине все флажки в моем списке отключены, и я не уверен, так ли это, как я установил [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;
            }
    }

В настоящее время в моем списке, независимо от статуса моего элемента, все флажки снятыи не уверен почему.

Answer 1

попробуйте

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

в css

.disableDiv {
        pointer-events: none;
    }

Answer 2

Благодаря @NanditaAroraSharma я смог понять, что this.disabled переопределяется каждый раз, когда изменяется статус элемента списка и, таким образом, отражает последний статус списка и применяет его ко всем элементам. Я обновил свой [attr.disabled] = "item.id == 1 ? true : null" и теперь отключены только те элементы, которые действительно должны быть отключены.

Answer 3

попробуйте это [disabled]

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