我有一个HTML元素(类型复选框的输入),并在我的模板,我已经添加了以下所提到的HTML元素:
<input type="checkbox" *ngFor="let status of statuses"
[class.disabled]="status==='Ready' && settings.length > 0 && !settings.includes(status)" [disabled]="status==='Ready' && settings.length > 0 && !settings.includes(status)">
现在,一切都完美的作品,并正是我想要的方式,但我需要复制一个很长的条件:
"status==='Ready' && settings.length > 0 && !settings.includes(status)"
有一个较短的方式做到这一点?
我不能只用禁用的,因为那时的复选框将被禁用确实,但它看起来好像是有效且被启用(即使它不能被选中)。
我不能只用class.disabled,因为那时的复选框看起来为禁用,但如果我尝试检查它,我会成功的(它只是看起来禁用,但它实际上已启用)。
任何建议,好吗?
Instead of checking all the condition "status==='Ready' && settings.length > 0 && !settings.includes(status)" in template, use component for this.
you can write a simple function in the component which return either true or false based on the condition
function disableCheckBox() {
if(status==='Ready' && settings.length > 0 && !settings.includes(status))
return true;
return false;
}
and in the template
<input type="checkbox" *ngFor="let status of statuses"
[class.disabled]="disableCheckBox()" [disabled]="disableCheckBox()">
Or Else create a single variable for that
也许不是在你的CSS文件的.disabled选择器,你可以使用
input[type="text"]:disabled { ... your css rules ...}
如果是的话,你可以删除[class.disabled] =“...”在你的HTML。