Angular2、Ionic2：ngModelを使用してネストされた* ngforのラジオボタンに2wayバインディングを行う方法？

Question

JSON形式のAPIを次の形式で使用しています。

私は質問&選択肢形式の形でこれを表示したいです。ラジオボタンを使って選択肢を表示しようとしています。しかし私のngModelは機能しません。自分の.tsファイルにngModelを使用して、選択した選択肢のオブジェクト全体にアクセスしたいとします。

はここにここに私の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> 

これは、上記のコードの出力である私のTSコード

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); 
    } 

です。 objが定義されていない理由がわかりません。 ngModelに問題があります。私はngModelをどうすればいいのか、typescriptファイルの "choiceObj"にはどのようにアクセスすればよいのか理解できません。誰か助けてください。

Answer 1

モデルはchoiceObj.choiceが選択の対象にありません。 あなたは答えとしてそれをマークしてくださいしてくださいすることができ、それが役に立った場合は、「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>