时间戳

首页 > 解决方案 > 将 mat-radio-group 绑定到可为空的布尔值的正确方法？

angular - 将 mat-radio-group 绑定到可为空的布尔值的正确方法？

问题描述

我有一个简单的表单来显示来自 REST 服务器的数据。其中一个字段是布尔值，但可以为空。我的 UI 有一个带有两个 mat-radio-button 元素的 mat-radio-group，一个值为“true”，一个值为“false”。我希望如果它为空，则两者都不会打开，并且单击一个会将值设置为真或假。但是，它根本没有做任何事情。

我尝试使用 ng-value 代替 value，但这没有任何效果。

      <mat-radio-group [(ngModel)]="canBeTrueFalseOrNull">
        <mat-radio-button value="true">yes</mat-radio-button>
        <mat-radio-button value="false">no</mat-radio-button>
      </mat-radio-group>

我认为可以将服务器中的数据转换为字符串，然后在更新时再次将其更改回来，但这似乎过于复杂。有没有更简单的方法来做到这一点？

标签： angularangular-material

解决方案

要为每个单选按钮分配一个布尔值，您应该使用括号语法绑定该值：

[value]="true"

没有括号，值就是字符串"true"。下面的代码片段应该可以工作，如这个 stackblitz所示：

<mat-radio-group [(ngModel)]="canBeTrueFalseOrNull">
  <mat-radio-button [value]="true">yes</mat-radio-button>
  <mat-radio-button [value]="false">no</mat-radio-button>
</mat-radio-group>

推荐阅读