Question

我想互相锁定的复选框

<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>

当我使用数据库中的某些值打开对话框...时（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>

Answer 1

我看到您在双向绑定中使用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事件特定情况之类的事件返回结果。

Similary可以使用HTML元素正在使用Angulars ElementRef来访问。您可以阅读有关该here的更多信息。

另一种方法是使用Angulars Reactive表单方法，请查找相关表单here的参考

Answer 2

好的。我有一个灵魂。问题是他在我的数据库中将true和false编写为字符串。.（[disabled]）有任何字符串时，它总是true！

使用此功能，我可以解决我的问题。无论如何

checkIfChecked(data):string|boolean{
  console.log(data)
  if(data === "" || data === "false" || data === false || data === null || data === undefined) {
     return null

  }else{
    return true
  }
}

mat-checkbox在未定义时被禁用

2 个答案: