单选按钮被 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>

因此当按钮组在视图中时，默认情况下没有选中按钮。

我试过将 ngModel 放在单选按钮标签、ion-item 标签中，这两种方法都抛出异常：

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

不胜感激。

Answer 1

由于您将无线电组绑定到 units 属性，因此您不需要在模板中使用 checked 属性。

为了select默认选项之一，您只需将该选项的值分配给units 属性:

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>

单选按钮被 ngModel 覆盖

Radio-button checked overriden by ngModel

angular

ionic3

radio-button

angular-ngmodel