让我详细解释一下.对问题框架进行解释.
我有一个存储在REST API中的对象数组.该数组包含问题和选择.每个问题有4个选项,即单选按钮.
我试图在同一页面上一次显示一个问题以及问题的选择.我有两个按钮“上一个”和“前进”,它将问题加载到同一页面上.
当我单击下一个按钮时,将显示阵列中的下一个问题以及选项.当我单击上一个按钮时,显示上一个问题,但不显示“使用选中的单选按钮”.
现在我的要求是,即使在进入下一个问题之后,上一个问题中检查的单选按钮也必须保持检查,当我点击之前它必须向我显示我检查了哪个单选按钮.
我正在尝试使用单选按钮提供的[已选中]选项.但我无法得到它.这是我的代码:
<div *ngIf="questions[indexVal]"> {{indexVal+1}} {{questions[indexVal].Text}} <div *ngFor="let choiceObj of questions[indexVal].choices"> <input name='question' type='radio' [value]='choiceObj' [(ngModel)]='selectedchoice' (ngModelChange) = "storeChoice(choiceObj.choiceId,questions[indexVal])" [checked]="check(questions[indexVal])"/> <label [for]='choiceObj'> {{choiceObj.choiceText}} </label> </span> </div> </div> <button ion-button value="prevIoUs" (click)="PrevQues()" [disabled] = "disableprev"> PREVIoUS </button> <button ion-button value="next" (click)="NextQues()"> NEXT </button>
最初indexVal = 0,这意味着它指向第一个问题.点击下一个按钮,它变为indexVal = 1,而之前它变为indexVal- = 1;
这是我的打字稿代码.我正在尝试维护一个名为“answers”的数组,它存储所选择的选项.
storeChoice(choiceId,questions[indexVal]) { questions[indexVal].answers[0] = choiceId; } check(questions[indexVal]) { return questions[indexVal].answers[0]; }
您可以将答案绑定到问题[index] .answer,而不是将selectedChoice属性用于所有检查.
请看一下 this working plunker
请看一下 this working plunker
这是结果:
正如你在那个plunker中看到的那样,我正在约束问题的答案.直接:
<ion-list radio-group [(ngModel)]="question.answer"> <ion-item no-lines no-padding *ngFor="let choice of question.choices"> <ion-label>{{ choice.choiceText }}</ion-label> <ion-radio [value]="choice"></ion-radio> </ion-item> </ion-list>
查看代码
<ion-content padding> <ion-slides> <ion-slide *ngFor="let question of questions; let i = index"> <h1>{{ question.text }}</h1> <ion-list radio-group [(ngModel)]="question.answer"> <ion-item no-lines no-padding *ngFor="let choice of question.choices"> <ion-label>{{ choice.choiceText }}</ion-label> <ion-radio [value]="choice"></ion-radio> </ion-item> </ion-list> <span style="font-size: 1.2rem;">Selected answer: {{ question.answer | json }}</span> <ion-row margin-top> <ion-col> <button (click)="showPrevIoUs()" ion-button text-only [disabled]="i === 0" >PrevIoUs</button> </ion-col> <ion-col> <button [disabled]="!question.answer" *ngIf="i < questions.length - 1" (click)="showNext()" ion-button text-only >Next</button> <button [disabled]="!question.answer" *ngIf="i === questions.length - 1" (click)="showNext()" ion-button text-only >Submit</button> </ion-col> </ion-row> </ion-slide> </ion-slides> </ion-content>
组件代码
import { Component,ViewChild } from '@angular/core'; import { NavController,Content,Slides } from 'ionic-angular'; @Component({...}) export class HomePage { @ViewChild(Slides) slides: Slides; public questions: Array<{ text: string,answer: number,choices: Array<{choiceId: number,choiceText: string}> }> ngOnInit() { this.slides.lockSwipes(true); } constructor() { this.questions = [ { text: 'Question 1',choices: [ { choiceId: 1,choiceText: 'Choice 1-1' },{ choiceId: 2,choiceText: 'Choice 1-2' },{ choiceId: 3,choiceText: 'Choice 1-3' },{ choiceId: 4,choiceText: 'Choice 1-4' } ],answer: null },{ text: 'Question 2',choices: [ { choiceId: 21,choiceText: 'Choice 2-1' },{ choiceId: 22,choiceText: 'Choice 2-2' },{ choiceId: 23,choiceText: 'Choice 2-3' },{ choiceId: 24,choiceText: 'Choice 2-4' },],{ text: 'Question 3',choices: [ { choiceId: 31,choiceText: 'Choice 3-1' },{ choiceId: 32,choiceText: 'Choice 3-2' },{ choiceId: 33,choiceText: 'Choice 3-3' },{ choiceId: 34,choiceText: 'Choice 3-4' },answer: null } ] } public showPrevIoUs(): void { this.slides.lockSwipes(false); this.slides.slidePrev(500); this.slides.lockSwipes(true); } public showNext(): void { this.slides.lockSwipes(false); this.slides.slideNext(500); this.slides.lockSwipes(true); } }