Ionic2フォームにイオンラジオ値へのアクセス

Question

私はクイズアプリを実行するために、チェックボックスからアクセス値にしようとしているが、私は二つの問題があります：私は次のエラーを取得する

1. を：「例外：エラーがしようとしdiff [quizz1 @ 3：10]の[quizzs]に 'quizz.choice1'があります。
2. チェックボックスの値にアクセスできません。

ここでは私の.html形式です：

<form #quizzForm="ngForm" (ngSubmit)="onSubmit(quizzForm.values)"> 

    <ion-list padding radio-group *ngFor="#quizz of quizzs"> 

     <ion-list-header text-center> 
     QUIZZ 2 
     </ion-list-header> 

     <p text-justify> 
     <b text-uppercase>Question :</b> 
     <span courant>{{quizz.question}}</span> 
     </p> 

     <ion-item> 
     <ion-label>{{quizz.choice1}}</ion-label> 
     <ion-radio 
      ngControl="choice1" 
      #choice1="ngForm" 
      value="quizz.choice1"> 
     </ion-radio> 
     </ion-item> 

     <ion-item> 
     <ion-label>{{quizz.choice2}}</ion-label> 
     <ion-radio 
      ngControl="choice2" 
      #choice2="ngform" 
      value="quizz.choice2"> 
     </ion-radio> 
     </ion-item> 

     <ion-item [hidden]="!quizz.choice3"> 
     <ion-label>{{quizz.choice3}}</ion-label> 
     <ion-radio 
      ngControl="choice3" 
      #choice3="ngform" 
      value="quizz.choice3"> 
     </ion-radio> 
     </ion-item> 

     <ion-item [hidden]="!quizz.choice4"> 
     <ion-label>{{quizz.choice4}}</ion-label> 
     <ion-radio 
      ngControl="choice4" 
      #choice4="ngform" 
      value="quizz.choice4"> 
     </ion-radio> 
     </ion-item> 

     <br/><br/> 

     <div style="width:50%; margin: 0 auto"> 
     <button 
      type="submit" 
      [disabled]="!choice1.checked && !choice2.checked && !choice3.checked && !choice4.checked" 
      block light outline> 
      Valider</button> 
     </div> 

     <br/> 

     <div [hidden]="quizz.result != quizz.answer" 
      [class.correct]="correct" 
      [class.false]="!correct"> 
     <b text-uppercase>Réponse :</b> 
     <span courant>{{quizz.answer}}</span> 
     <br/> 
     <p bluegray text-uppercase>Explication : </p> 
     <span>{{quizz.explication}}</span> 
     </div> 

    </ion-list> 

</form> 

そして、これは私が構築しています.TSです：私は間違って何をやっている

import {Page, NavController} from 'ionic-angular'; 
import { FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators, AbstractControl } from 'angular2/common'; 

@Page({ 
    templateUrl: 'build/pages/quizz/quizz2/quizz2.html', 
    directives: [FORM_DIRECTIVES] 
}) 

export class Quizz2 { 

    quizzForm: ControlGroup; 
    question = ''; 
    choice1: AbstractControl; 
    choice2: AbstractControl; 
    choice3: AbstractControl; 
    choice4: AbstractControl; 
    answer = ''; 
    explication = ''; 
    isValid = false; 

    quizzs = [ 

    { 
     question : `Le pictogramme représentant une personne 
        handicapée est réservé uniquement à une personne 
        handicapée en fauteuil`, 
     choice1 : 'vrai', 
     choice2 : 'faux', 
     choice3 : '', 
     choice4 : '', 
     answer : 'faux', 
     explication : `La délivrance du pictogramme par la COTOREP 
         dépend en effet du taux d’invalidité (80%) 
         quelque soit le handicap` 
    } 
    ] 

    constructor(public nav: NavController, fb: FormBuilder) { 
     this.nav = nav; 

     this.quizzForm = fb.group({ 
     choice1: ['',], 
     choice2: ['',], 
     choice3: ['',], 
     choice4: ['',] 
     }); 
     this.choice1 = this.quizzForm.controls['choice1']; 
     this.choice2 = this.quizzForm.controls['choice2']; 
     this.choice3 = this.quizzForm.controls['choice3']; 
     this.choice4 = this.quizzForm.controls['choice4'] 
    } 

    onSubmit(values) { 
     console.log('Formulaire:' ,values); 
    } 

？誰もがアイデアを持っていますか？おかげさまで

Answer 1

最初に覚えているラジオグループでは、一度に1つのボタンをチェックすることしかできません。複数の選択が必要な場合は、チェックボックスの使用を検討する必要があります。

ラジオボタンの値にアクセスして操作するには、ngModelをradio-groupレベル（[(ngModel)]="radioValue"など）で宣言する必要があります。この場合、radioValueは選択したラジオのvalueを保持し、その逆も同様です。