Question

在我的HTML中，表单中有一个单选按钮：

<mat-radio-button [(ngModel)]="boxChecked" name="boxChecked" value="boxChecked">Check me</mat-radio-button>

在TypeScript中，我有布尔值boxChecked：

boxChecked = false;

提交表单时，我使用console.log(this.boxChecked);来查看布尔值是否已从false更改为true，但是无论我单击多少次，它都不会改变按钮。

我已经尝试研究，大多数人都说，拥有一个布尔并将其与ngModel绑定就足以将我的布尔连接到我的单选按钮，并且每次单击它都应该对其进行更改。我想念什么？

Answer 1

在这种情况下，您应该使用复选框-

  <mat-checkbox [(ngModel)]="boxChecked"> boxChecked </mat-checkbox>

PS：如果我们有多个选择，并且需要让用户从其中选择一个，总是使用单选按钮。

但是，如果您仍然想使用单选按钮，则应该将值绑定到radio-group，演示示例-

<mat-radio-group
  aria-labelledby="example-radio-group-label"
  class="example-radio-group"
  [(ngModel)]="boxChecked">
  <mat-radio-button class="example-radio-button" [value]="boxChecked">
    {{season}}
  </mat-radio-button>
</mat-radio-group>

Documentation Link

Answer 2

其他答案清楚地说明了mat-radio-button的用法。导致代码中出现问题的主要原因是：

<mat-radio-button [(ngModel)]="boxChecked" name="boxChecked" 
                value="boxChecked" <<-- here lies the problem
>Check me</mat-radio-button>

您的boxChecked变量在您的false代码中已设置为Typescript。 Angular的工作是将value字段中提供的值分配给ngModel字段中提供的变量。

最终，您的boxChecked（在ngModel中）变量得到boxChecked(false)（在value中）。

如果您希望看到值的变化，请尝试使用以下方法：

<mat-radio-button [(ngModel)]="boxChecked" name="boxChecked" 
                value="true" 
>Check me</mat-radio-button>

查看单选按钮是否已选中

2 个答案: