web-dev-qa-db-ja.com

ng-Modelをイオンラジオ要素で使用するにはどうすればよいですか？

イオンラジオ要素に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>

私はそれをイオン入力とイオン選択に実装しようとしましたが、それはうまくいきます。私も追加してみましたdirectives: [FORM_DIRECTIVES]をmy @Pageに追加し、対応するインポートを追加しましたが、問題は解決しません。

何か案は？

javascriptionic-frameworkangularecmascript-6ionic2
15
SemperMemento

構文が変更され、ngModelはion-list＆radio-groupと共に1回だけ配置する必要があります。各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フレームワーク フォーラムリンク をご覧ください。

26
Pankaj Parkar

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>
0
Mathulan