Angular2，Ionic2：如何使用 ngModel 对嵌套 *ngfor 中的单选按钮进行双向绑定？

Question

我的 API 在 JSON 中的格式如下。

我想以问题和选择的形式显示它。我正在尝试使用单选按钮显示选项。但是我的 ngModel 不工作。我想在我的 .ts 文件中使用 ngModel 访问所选选项的整个对象。

这是我的 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);
    }

这是我的 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>

这是上述代码的输出。我不明白为什么 obj 未定义。我对 ngModel 有疑问。我不明白我应该把我的 ngModel 作为什么以及我应该如何访问打字稿中的 "choiceObj" file.Can 请有人帮助我。

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>

Angular2，Ionic2：如何使用 ngModel 对嵌套 *ngfor 中的单选按钮进行双向绑定？

Angular2,Ionic2: How to do 2way binding for radio button in nested *ngfor using ngModel?

radiobuttonlist

angular-ngmodel

ionic2

angular2-directives

ngfor