[英]Angular 2 attr.disabled not behaving as expected
I have a list of items to display and alongside each item there is a checkbox. 我有一个要显示的项目列表,每个项目旁边都有一个复选框。 I have a condition statement to check whether each item's checkbox should be disabled or enabled.
我有一个条件语句来检查是否应禁用或启用每个项目的复选框。 For some unclear reason every checkbox in my list is disabled and i am not sure if it is how i set up the [attr.disabled] or an error in my condition statement.
由于某些不清楚的原因,列表中的每个复选框都被禁用,因此我不确定这是否是我设置[attr.disabled]的方式或条件语句中的错误。
Here is my html: 这是我的html:
<input class="form-control" [attr.disabled]="disabled == true ? true : null"
type="checkbox"[checked]="item.status" (click)="itemChecked($event, item)" />
In my component: 在我的组件中:
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;
}
}
Currently in my list regardless of the status of my item, all check boxes are disabled and not sure why. 当前在我的列表中,无论我的项目状态如何,所有复选框均被禁用,并且不确定原因。
try this one [disabled]
试试这个
[disabled]
<input class="form-control" [disabled]="disabled == true ? true : null"
type="checkbox"[checked]="item.status" (click)="itemChecked($event, item)" />
try this 尝试这个
<input class="form-control" [ngClass]="{'disableDiv': disabled === true}"
type="checkbox"[checked]="item.status" (click)="itemChecked($event, item)" />
in css 在CSS
.disableDiv {
pointer-events: none;
}
Thanks to @NanditaAroraSharma I was able to realize that this.disabled was been overridden every time a list item's status changed and thus reflecting the last status of the list and applying it to all the items. 感谢@NanditaAroraSharma,我能够意识到,每次更改列表项的状态时,this.disabled都会被覆盖,从而反映了列表的最后状态并将其应用于所有项。 I updated my
[attr.disabled] = "item.id == 1 ? true : null"
and now only the items that really should be disabled are disabled. 我更新了
[attr.disabled] = "item.id == 1 ? true : null"
,现在只有真正应禁用的项目被禁用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.