如何在離子無線電元素上使用 ngModel？

Question

我正在嘗試在 ion-radio 元素上實現 ngModel 但不知何故它不起作用。 這是我的代碼：

 import { Page } from 'ionic-angular'; @Page({ templateUrl: 'build/pages/settings/settings.html' }) export class Settings { constructor() { this.unit = 2; } }

 <ion-list radio-group> <ion-list-header> Unit </ion-list-header> <ion-item> <ion-label>Metric (kg)</ion-label> <ion-radio value="1" [(ngModel)]="unit"></ion-radio> </ion-item> <ion-item> <ion-label>Imperial (lbs)</ion-label> <ion-radio value="2" [(ngModel)]="unit"></ion-radio> </ion-item> </ion-list>

我已經嘗試在 ion-input 和 ion-select 上實現它，並且效果很好。 我還嘗試將directives: [FORM_DIRECTIVES]添加到我的 @Page 並添加了相應的導入，但這並不能解決問題。

有任何想法嗎？

Answer 1

現在語法已更改重寫， ngModel應僅與ion-list和radio-group一起放置一次。 無需將它們放在每個ion-radio元件上。

<ion-list radio-group [(ngModel)]="unit">
    <ion-list-header>
        Unit
    </ion-list-header>

    <ion-item>
        <ion-label>Metric (kg)</ion-label>
        <ion-radio value="1"></ion-radio>
    </ion-item>

    <ion-item>
        <ion-label>Imperial (lbs)</ion-label>
        <ion-radio value="2" ></ion-radio>
    </ion-item>
</ion-list>

有關更多信息，您可以訪問 ionic2 框架論壇鏈接

Answer 2

它與 Ionic 5 一起使用。

  <ion-radio-group value="answer">
       <ion-item *ngFor="let item of question?.answers">
           <ion-label> {{item.answer}} {{answer}}</ion-label>
           <ion-radio slot="start" color="tertiary" value="{{item.id}} 
                 (ionBlur)="saveAnswer(item.id)">
             </ion-radio>
        </ion-item>
   </ion-radio-group>

Answer 3

從 Ionic 4+ 開始，正確的語法是：

<ion-list>
<ion-radio-group [(ngModel)]="unit"> 
  <ion-list-header>
    Unit
  </ion-list-header>
    <ion-item>
      <ion-label>Metric (kg)</ion-label>
      <ion-radio value="1"></ion-radio>
    </ion-item>

    <ion-item>
      <ion-label>Imperial (lbs)</ion-label>
      <ion-radio value="2"></ion-radio>
    </ion-item>
  </ion-radio-group>
</ion-list>

Answer 4

您也必須在 Ionic 5 中更新以下代碼。

this.unit = 2;  

到

this.unit = '2';  

總之，您不能使用整數變量作為ion-radio值。

如果您要使用整數類型的單位，請參考以下代碼。

this.options = [
  {
    label: 'Metric (kg)',
    value: 1
  },
  {
    label: 'Imperial (lbs)',
    value: 2
  }
];

在 .html 代碼中

<ion-radio-group [(ngModel)]="unit">
  <ion-list-header>
    <ion-label>
      Unit
    </ion-label>
  </ion-list-header>
  <ion-item *ngFor="let opt of options">
    <ion-label>{{opt.label}}</ion-label>
    <ion-radio [value]="opt.value" slot="start"></ion-radio>
  </ion-item>
</ion-radio-group>

Answer 5

這適用於 ionic 5..tested 並且工作正常

 <ion-list>
        <ion-radio-group  >
          <ion-list-header>
            <ion-label>{{'Drivers' | translate}}</ion-label>
          </ion-list-header>
          <ion-item *ngFor="let item of drivers" lines="none" (ionChange)="checkValue(item)">
            <ion-avatar slot="start">
              <img [src]="item.coverImage" />
            </ion-avatar>
            <ion-label>{{item.fullname}} <br>
              <p>{{'Distance' | translate}} : {{item.distance}}Km</p>
            </ion-label>
            <ion-radio [value]="item.id"></ion-radio>
          </ion-item>
        </ion-radio-group>
      </ion-list>

然后在您的控制器中，您可以像這樣選擇它

檢查值（值）{

console.log("返回", value);

}

Answer 6

這對我有用

 postData={
"gender":''

}

   <ion-list>
  <ion-radio-group value="Male" >
    <ion-list-header>
      <ion-label style="font-size:10px;">Gender</ion-label>
    </ion-list-header>
    
    <ion-item>
      <ion-label>Male</ion-label>
      <ion-radio slot="start" value="Male" (ionBlur)="postData.gender='Male'"></ion-radio>
    </ion-item>

    <ion-item>
      <ion-label>Female</ion-label>
      <ion-radio slot="start" value="Female" (ionBlur)="postData.gender='Female'"></ion-radio>
    </ion-item>

  </ion-radio-group>
</ion-list>

Answer 7

這在 Ionic 5 上對我有用

<ion-radio-group name="iconSelect" ngDefaultControl [(ngModel)]="playerIcon" (ionChange)="setIcon()">
    <ion-list-header>           

    </ion-list-header>

  <ion-item>
    <ion-label>
        <ion-icon name="radio-button-off"></ion-icon>
        Circle
        </ion-label>

    <ion-radio value="1" ></ion-radio>
  </ion-item>
  <ion-item>
    <ion-label>
        <ion-icon name="square-outline"></ion-icon>
        Square
    </ion-label>
    <ion-radio value="2"></ion-radio>
  </ion-item>
  <ion-item>
    <ion-label>
        <ion-icon name="play"></ion-icon>
        Triangle
    </ion-label>
    <ion-radio value="3" ></ion-radio>
  </ion-item>
</ion-radio-group>