时间戳

首页 > 解决方案 > 更改（更改）事件的布尔值

angular - 更改（更改）事件的布尔值

问题描述

我正在尝试使用布尔值来检测表单中的单选按钮是否已被选中。

（我为 HTML 和 TS 文件省略了不必要的代码）

HTML：

<mat-radio-button (change)="toggleEditable($event)" value="overdraft">Overdraft</mat-radio-button>

打字稿：

overdraft = false;

toggleEditable(event) {
  if ( event.target.checked ) {
    this.overdraft = true;
  }
}

该事件未触发，因为当我尝试单击单选按钮并提交表单时，overdraft未设置为 true。但是，如果我使用(click)事件而不是(change)，它可以正常工作，但是 (click)事件的缺点是您必须双击单选按钮才能显示视觉选择，因此我觉得有必要使用(change)（查看更多这里：mat-checkbox 不检查条件是否为假（仅在双击时）。

我该如何解决这个问题，以便当我单击单选按钮时，我的(change)事件被触发并overdraft设置为 true 而不使用(click)UI 问题附带的 -events？

解决方案：

如果要获取 的实际值，mat-radio-button则需要进行以下更改：

1) 不要[value]="overdraft"在 HTML 中使用，而是使用value不带方括号的方法，例如： <mat-radio-button value="overdraft">Overdraft</mat-radio-button>

2) 在您的 TypeScript 代码中，您现在可以从 HTML 访问 value 属性：

valueChanged(event: MatRadioChange) {
  console.log(event.value); //will log the value for the button you clicked
}

标签： angulartypescriptevents

解决方案

您是否尝试过使用 ngModel？

它可能很简单：

<mat-radio-group  [(ngModel)]="selectedValue" (change)="valueChanged($event)">
  <mat-radio-button value="overdraft">Overdraft</mat-radio-button>
  <mat-radio-button value="otherValue">Other</mat-radio-button>
</mat-radio-group>

在您的控制器中，您可以拥有：

valueChanged(event) {
    this.overdraft = (event.value ==='overdraft');
}

推荐阅读