Angular2, Ionic2: Comment faire une liaison 2way pour le bouton radio dans nested * ngfor en utilisant ngModel?

Question

J'ai mon API au format JSON dans le format suivant.

Je veux afficher ce sous forme de question & format choix. J'essaie d'afficher les choix en utilisant les boutons radio. Mais mon ngModel ne fonctionne pas. Je veux accéder à l'ensemble de l'objet du choix sélectionné en utilisant ngModel dans mon fichier .ts.

Voici mon ts Code

export class Quiz implements OnInit { 
    testcontents: Array<any>=[]; 
    choiceObj:any; 

constructor(public navCtrl: NavController, public navParams: NavParams,public http:Http) {} 
    ngOnInit() 
    { 
     this.launchfunc(); 
    } 
    launchfunc() 
    { 
    this.http.post('launchtest/getTestContent',this.launchtestobj).subscribe(resp=>{ 
     this.testcontents = resp.data.questions; 
    }); 
    } 

    selectChoice($event) 
    { 
     console.log("12312341234",event); 
     console.log("obj",this.choiceObj); 
    } 

Voici mon code html

<ion-content padding> 
<div *ngFor="let qContent of testcontents; let i = index"> 
    {{i+1}} {{qContent.questionText}} 
    <div *ngFor="let choiceObj of qContent.choice"> 
     <input name='options' type='radio' [value]='choiceObj' [(ngModel)]='choiceObj.choice' (ngModelChange)="selectChoice(choiceObj)" /> 
     <label [for]='choiceObj'>{{choiceObj.choiceText}}</label> 
    </div> 
</div> 

Ceci est la sortie du code ci-dessus. Je ne comprends pas pourquoi obj est indéfini. J'ai un problème avec le ngModel. Je ne comprends pas ce que je devrais mettre mon ngModel comme et comment dois-je accéder au "choiceObj" dans le fichier de tapuscrit.Peut-être quelqu'un m'aider s'il vous plaît.

Answer 1

le modèle est choiceObj.choice qui n'existe pas dans l'objet de son choix. vous devez le remplacer par « choiceObj.choiceId »

<ion-content padding> 
<div *ngFor="let qContent of testcontents; let i = index"> 
    {{i+1}} {{qContent.questionText}} 
    <div *ngFor="let choiceObj of qContent.choice"> 
     <input name='options' type='radio' [value]='choiceObj' [(ngModel)]='choiceObj.choiceId' (ngModelChange)="selectChoice(choiceObj)" /> 
     <label [for]='choiceObj'>{{choiceObj.choiceText}}</label> 
    </div> 
</div>