0

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

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>

材料.module.ts

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

主模块.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)]。

4

2 回答 2

-1

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

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

例如。有时会出现一个复选框而没有选中的项目，或者有多个选中的框，或者一个选中的项目没有选中的框......很奇怪。

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

TLDR；

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

MAT_CHECKBOX_CLICK_ACTION, useValue: 'noop'

这会将任何点击操作留在您的手中，以供开发人员实施。

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

于 2020-08-06T15:16:31.363 回答
-1

尝试：在您的 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

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

于 2020-01-10T19:57:03.720 回答