angular - 被 ngModel 覆盖的单选按钮选中

Question

向单选组声明 ngModel 时，它似乎覆盖了由 [checked]="true"分配的默认单选按钮选择

     <!--Radio buttons for units-->
      <ion-list-header style="color: white">
        Units
      </ion-list-header>
   <ion-list radio-group [(ngModel)]="units">
   
    <ion-item>
      <ion-label>Metric</ion-label>
      <ion-radio [checked]="true"  value= "metric"></ion-radio>
    </ion-item>
    <ion-item>
      <ion-label>Imperial</ion-label>
      <ion-radio value="imperial"></ion-radio>
    </ion-item>
  </ion-list>

因此，当按钮组在 View 中时，默认情况下没有选中按钮。
我尝试将 ngModel 放置在单选按钮标记中，即 ion-item 标记中，这两种方法都会引发异常:

Uncaught Error: Uncaught (in promise): Error: No value accessor forform control with unspecified name attribute_throwError@http://localhost:8100/build/vendor.js:27548:20

任何输入表示赞赏。

Answer 1

由于您将 radio 组绑定(bind)到 units属性，您不需要使用 checked模板中的属性。
为了默认选择其中一个选项，您只需将该选项的值分配给 units属性(property):

private someFunction(): void {
  // ...
  this.units = 'metric'; 
}

<!--Radio buttons for units-->
<ion-list-header style="color: white">
  Units
</ion-list-header>
<ion-list radio-group [(ngModel)]="units">
  <ion-item>
    <ion-label>Metric</ion-label>
    <ion-radio value= "metric"></ion-radio>
    </ion-item>
  <ion-item>
    <ion-label>Imperial</ion-label>
    <ion-radio value="imperial"></ion-radio>
  </ion-item>
</ion-list>