Mat-checkbox [checked]=“false”不起作用

Question

尝试实现一个复选框，我可以在其中动态设置值（并让它出现在框中）。

HTML

<mat-checkbox *ngIf="isReply()" class="col-2" formControlName="checkbox" [checked]="false"  >CheckBox off</mat-checkbox> 
<mat-checkbox *ngIf="!isReply()" class="col-2" formControlName="checkbox"  >CheckBox</mat-checkbox> 

materials.module.ts

addCheckbox() {
      this.checkboxForm = this.fb.group({
        'CheckBox':true,

main.module.ts

isReply(): boolean { 
  return: true;
}

有一个单选按钮可以打开和关闭 isReply()。

当我打开 isReply() 时，我可以看到 CheckBox 标签从“CheckBox”变为“CheckBox off”，但复选框状态（可见）没有改变。

我可以应用其他逻辑来响应复选框被关闭，即使复选框仍然可见检查（真）。这会将复选框的值更改为 false，即使复选框仍处于可见选中状态 (true)。

当我单击复选框（清除可见框）时，值切换并且响应如预期的那样，即使未选中该框，复选框的值现在也是 true。

---

我做了以下更改，但仍然不起作用

adjust this to: 

<div class="row" *ngIf="isReply()">
 <mat-checkbox class="col-2" formControlName="checkBox" >CheckBox</mat-checkbox> 
</div>
<div class="row" *ngIf="!isReply()">
 <mat-checkbox class="col-2" [checked]='true' 
         formControlName="checkBox" >CheckBox</mat-checkbox>
</div>

在ts中：

addCheckbox() {
      this.checkboxForm = this.fb.group({
        'checkBox':false,

我有两个单选按钮（标准和回复）。

单选按钮的 html：

<form [formGroup]="materials.SignatureType">
  <mat-radio-group formControlName="sigtype" >Signature Type: &nbsp;
  <label><input type="radio" value="standard" formControlName="sigtype">
  <span>&nbsp;Standard</span>
  </label>
<label><input type="radio" value="reply" (click)="setBoxes()" formControlName="sigtype" >
 <span>&nbsp;Reply</span>
 </label>
</mat-radio-group> 

setBoxes() 的代码：

if (this.isReply) {
      this.materials.checkboxForm.value.checkBox = false;
    }
    else {
      this.materials.checkboxForm.value.checkBox = true;
    }

单击“回复”单选按钮会更改复选框的值，但不会更改按钮的状态。

除了单击复选框外，我无法更改按钮状态。

不推荐使用 Angular 7.2.3 [(ngModel)]。

Answer 1

我的项目遇到了这个问题。

我已将复选框与[checked]=... 连接起来，但我有任务让它按预期工作。将未选中的项目显示为opacity: 40%;，并在选中的项目旁边打勾。

例如。有时会有一个复选框没有选中项，或者有多个复选框，或者一个选中项没有选中框……很奇怪。

我的结论；它以编程方式设置并且被点击操作覆盖。

TLDR；

我的解决方案； 通过指定更改模块提供程序中的点击操作配置：

MAT_CHECKBOX_CLICK_ACTION, useValue: 'noop'

这会将任何点击操作留给开发人员实施。

查看文档以获取更多信息 -> https://v6.material.angular.io/components/checkbox/overview

Answer 2

尝试： 在你的 component.html <div class="container-fluid p-5 mt-2 mb-2" > <mat-checkbox class="col-2" [checked]="var1" >CheckBox off</mat-checkbox> <mat-checkbox class="col-2" [checked]="var2" >CheckBox</mat-checkbox> </div>

在您的 component.ts 文件中 var1 = false; var2 = true

您只需要绑定 checked 属性，然后您就可以在您的逻辑中更改 var1 和 var2 的值。