Question

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

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

HTML：

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

TypeScript：

overdraft = false;

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

该事件未触发，因为当我尝试单击单选按钮并提交表单时，overdraft未设置为true。但是，如果我使用(click)事件而不是(change)，它可以正常工作，但是 (click)事件具有以下缺点：您必须双击单选按钮以显示视觉选择，因此我觉得有必要使用(change)（在此处查看更多信息：mat-checkbox does not check if condition is false (only on double click)）。

如何解决此问题，以便当我单击单选按钮时，将触发我的(change)事件，并且将overdraft设置为true而不使用{带有UI问题？

解决方案：

如果要获取(click)的实际值，则需要进行以下更改：

1）代替在HTML中使用mat-radio-button，而应使用不带方括号的[value]="overdraft"，例如： value

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

<mat-radio-button value="overdraft">Overdraft</mat-radio-button>

Answer 1

您是否尝试过使用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');
}

Answer 2

您是否看过console.log(event.target.checked)给您的回报？
Angular 2 radio button events尝试<input type="radio" "toggleEditable($event)" value="overdraft">Overdraft</input> 如果可行，则可能是mat-radio-button有问题
Material radio button change event Angular 4建议您需要其他类型的事件：

import { MdRadioChange } from '@angular/material'; ... toggleEditable(event: MdRadioChange) {...}

Answer 3

当触发change事件时，您也可以直接在HTML中修改值：

<mat-radio-button (change)="overdraft = !overdraft; display()" [value]="overdraft">Overdraft</mat-radio-button>

  overdraft = false;
  display() {
    console.log(this.overdraft);
  }

显示功能仅在此处用于演示；）

在（change）事件上更改布尔值

3 个答案: