时间戳

首页 > 解决方案 > mat-checkbox 在未定义时禁用

angular - mat-checkbox 在未定义时禁用

问题描述

我想相互锁定的复选框

<div>
    <mat-checkbox color="primary" [(ngModel)]="data.timer.onSunrise"
        [(disabled)]="data.timer.onDisable || data.timer.onSunset || data.timer.offSunrise"><h4>bei Sonnenaufgang</h4></mat-checkbox>
    <mat-checkbox color="primary" [(ngModel)]="data.timer.onSunset"
        [(disabled)]="data.timer.onDisable || data.timer.onSunrise || data.timer.offSunset"><h4>bei Sonnenuntergang</h4></mat-checkbox>
</div>

<div>
    <mat-checkbox color="primary" [(ngModel)]="data.timer.offSunrise"
       [(disabled)]="data.timer.offDisable || data.timer.offSunset || data.timer.onSunrise"><h4>bei Sonnenaufgang</h4></mat-checkbox>
    <mat-checkbox color="primary" [(ngModel)]="data.timer.offSunset"
       [(disabled)]="data.timer.offDisable || data.timer.offSunrise || data.timer.onSunset"><h4>bei Sonnenuntergang</h4></mat-checkbox>
</div>

当我使用 DB 中的一些值打开对话框时...（console.log() 显示例如 onSunset 未定义）复选框被禁用，即使 onSunset 没有值（未定义）

当我将指令从 [()] 更改为 () 时，它可以工作。它不再被禁用。但是..这是一种方式！没有锁定功能了

<div>
 <mat-checkbox color="primary" [(ngModel)]="data.timer.onSunrise"
 (disabled)="data.timer.onDisable || data.timer.onSunset || data.timer.offSunrise"><h4>bei 
  Sonnenaufgang</h4></mat-checkbox>
<mat-checkbox color="primary" [(ngModel)]="data.timer.onSunset"
(disabled)="data.timer.onDisable || data.timer.onSunrise || data.timer.offSunset"><h4>bei 
  Sonnenuntergang</h4></mat-checkbox>
</div>

标签： angular

解决方案

我看到您使用disabled具有两种方式绑定的角度属性。它不会作为双向绑定工作。diabled是一个输入属性，它不会工作[(ngModel)]注释。对于您的具体情况，我建议将逻辑放入控制器并在那里定义禁用逻辑。例如

在 component.html 中：

<div>
 <mat-checkbox color="primary" [(ngModel)]="data.timer.onSunrise"
 (disabled)="(disabled)="disableCheckBoxes(onSunrise.value,onSunset.value)" #onSunrise><h4>bei 
  Sonnenaufgang</h4></mat-checkbox>

<mat-checkbox color="primary" [(ngModel)]="data.timer.onSunset"
(disabled)="disableCheckBoxes(onSunrise.value,onSunset.value)" #onSunset><h4>bei 
  Sonnenuntergang</h4></mat-checkbox>
</div>

在 component.ts 中：

disableCheckBoxes(onSunrise?:any,onSunset?:any){
      if(onSunrise.value){
        return true;
       } else if(onSunset.value) {
          return true;
     }
}

同样，您可以处理控制器中的逻辑并通过click事件特定场景等事件返回结果。

同样，您可以使用访问 HTML 元素正在使用 Angulars ElementRef。您可以在此处阅读更多相关信息。

另一种方法是使用 Angulars 反应式表单方法 请在此处找到反应式表单的参考

推荐阅读