ラジオ・グループionic2のラジオ・ボタンの値on（ionChange）の取得

Question

Ionic2のラジオ・グループの選択されたラジオ・ボタンの値on（ionChange）イベントを取得したいとします。

私のHTMLコードは、私が（イオン変化する）上）（mcqQuesitonにイオンラジオ値を取得できますか

<ion-list radio-group *ngFor="let question of mcqData; let i= index;" (ionChange)="mcqAnswer(i)"> 
    <ion-list-header> 
    {{question.questionText}} 
    </ion-list-header> 

    <ion-item> 
    <ion-label>{{question.optionA}}</ion-label> 
    <ion-radio value="1"></ion-radio> 
    </ion-item> 

    <ion-item> 
    <ion-label>{{question.optionB}}</ion-label> 
    <ion-radio value="2"></ion-radio> 
    </ion-item> 

    <ion-item> 
    <ion-label>{{question.optionC}}</ion-label> 
    <ion-radio value="3"></ion-radio> 
    </ion-item> 

    <ion-item> 
    <ion-label>{{question.optionD}}</ion-label> 
    <ion-radio value="4"></ion-radio> 
    </ion-item> 
</ion-list> 

です。

複数の質問ページであるため、1つのページに番号またはラジオグループがあります。

Answer 1

ionSelectイベントを<ion-radio>とすると値を渡すことができます。

あなたtypescriptですで

... 
    <ion-item> 
    <ion-label>{{question.optionA}}</ion-label> 
    <ion-radio value="1" (ionSelect)="mcqAnswer(i,1)"></ion-radio> 
    </ion-item> 
    <ion-item> 
    <ion-label>{{question.optionB}}</ion-label> 
    <ion-radio value="2" (ionSelect)="mcqAnswer(i,2)"></ion-radio> 
    </ion-item> 
... 

（.TS）は、それはあなたがあなたのonChangeメソッドに$イベントを通過することができ

mcqAnswer(questionID,answer){ 
... 
} 

Answer 2

のようなものになりますファイル。例えば。あなたのHTML内

：あなたの活字体で

<ion-list radio-group *ngFor="let question of mcqData; let i= index;" (ionChange)="mcqAnswer($event)"> 
    <ion-list-header> 
    {{question.questionText}} 
    </ion-list-header> 

    <ion-item> 
    <ion-label>{{question.optionA}}</ion-label> 
    <ion-radio value="1"></ion-radio> 
    </ion-item> 

    <ion-item> 
    <ion-label>{{question.optionB}}</ion-label> 
    <ion-radio value="2"></ion-radio> 
    </ion-item> 

    <ion-item> 
    <ion-label>{{question.optionC}}</ion-label> 
    <ion-radio value="3"></ion-radio> 
    </ion-item> 

    <ion-item> 
    <ion-label>{{question.optionD}}</ion-label> 
    <ion-radio value="4"></ion-radio> 
    </ion-item> 
</ion-list> 

：

function mcqAnswer(value) 
{ 
    console.log(value); 
} 

Answer 3

利用（変更）イベント

<ion-list radio-group [(ngModel)]="pet" (change)="petChange($event)"> 
<ion-item> 
    <ion-radio checked (select)="dogSelect($event)"></ion-radio> 
    <ion-label>Dogs</ion-label>