Question

我有一个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，因为这样复选框将显示为已禁用，但是如果我尝试对其进行检查，我将会成功（它仅显示为已禁用，但实际上已启用）。

有什么建议吗？

Answer 1

也许可以使用

代替CSS文件中的.disabled-selector。

input[type="text"]:disabled { ... your css rules ...}

如果是，则可以在HTML中删除[class.disabled] =“ ...”。

Answer 2

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

同时需要禁用一个复选框并使其处于禁用状态（样式）

2 个答案: