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

Question

我有一个简单的表单显示来自 REST 服务器的数据。其中一个字段是布尔值，但可以为空。我的 UI 有一个带有两个 mat-radio-button 元素的 mat-radio-group，一个值为“true”，一个值为“false”。我希望如果它为空，则两者都不会打开，单击一个会将值设置为 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>

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

Answer 1

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

[value]="true"

如果没有括号，则值为 string "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>