angular - 将 mat-radio-group 绑定(bind)到可空 bool 值的正确方法？

Question

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

要为每个单选按钮分配一个 bool 值，您应该使用 brackets 绑定(bind)该值语法:

[value]="true"

没有括号，值为字符串 "true"。下面的代码片段应该可以工作，如 this 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>