Angular2，Typescript:如何在每页显示一个元素的数组中检查单选按钮? [英] Angular2,Typescript: How to put the radio button checked when in an array which displays one element per page?
问题描述
让我详细解释一下.对不起，问题框架.
我有一个存储在 REST API 中的对象数组.该数组包含问题和选择.每个问题都有 4 个选项，它们是单选按钮.
我试图在同一页面上一次显示一个问题以及问题的选择.我有 2 个按钮上一个"和前进"，它们在同一页面上加载问题.
当我单击下一个按钮时，会显示数组中的下一个问题以及选项.当我单击上一个按钮时，会显示上一个问题，但不会显示选中的单选按钮".现在我的要求是，即使在转到下一个问题之后，在上一个问题中选中的单选按钮也必须保持选中状态，并且当我单击上一个时，它必须显示我选中了哪个单选按钮.
我正在尝试使用单选按钮提供的 [checked] 选项.但我无法获得它.这是我的代码:
<div *ngIf="questions[indexVal]">{{indexVal+1}} {{问题[indexVal].Text}}<div *ngFor="letchoiceObj of questions[indexVal].choices"><输入名称='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>最初 indexVal=0 表示它指向第一个问题.单击下一个按钮时，它变为 indexVal+=1，之前变为 indexVal-=1；
这是我的打字稿代码.我正在尝试维护一个名为answers"的数组，用于存储所选选项.
storeChoice(choiceId, questions[indexVal]){问题[indexVal].answers[0] = 选择ID；}检查(问题[indexVal]){返回问题[indexVal].answers[0];}您可以将答案绑定到 questions[index]，而不是使用 .请查看selectedChoice 属性进行所有检查.回答
正如您在那个 plunker 中看到的，我将答案直接绑定到 question.answer:
<ion-list radio-group [(ngModel)]="question.answer"><ion-item no-lines no-padding *ngFor="let selection of question.choices"><ion-label>{{choice.choiceText }}</ion-label><ion-radio [value]="choice"></ion-radio></离子项目></离子列表>还请注意，我在更改问题时使用了一个滑块来添加一个很好的效果.
查看代码
<离子内容填充><离子载玻片><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 selection of question.choices"><ion-label>{{choice.choiceText }}</ion-label><ion-radio [value]="choice"></ion-radio></离子项目></离子列表><span style="font-size: 1.2rem;">选择的答案:{{ question.answer |json }}</span><离子行边距顶部><离子色谱><button (click)="showPrevious()" ion-button text-only [disabled]="i === 0" >Previous</button></ion-col><离子色谱><button [disabled]="!question.answer" *ngIf="i < questions.length - 1" (click)="showNext()" 离子按钮纯文本>下一步</button><button [disabled]="!question.answer" *ngIf="i === questions.length - 1" (click)="showNext()" 离子按钮纯文本>提交</button></ion-col></离子行></离子载玻片></离子载玻片></离子含量>组件代码
import { Component, ViewChild } from '@angular/core';从 'ionic-angular' 导入 { NavController, Content, Slides }；@零件({...})导出类主页 {@ViewChild(Slides) 幻灯片:幻灯片；公共问题:数组<{文本:字符串，答案:数字，选择:数组<{choiceId:数字，choiceText:字符串}>}>ngOnInit() {this.slides.lockSwipes(true);}构造函数(){这个问题= [{文本:'问题 1'，选择:[{选择ID:1，选择文本:'选择 1-1'},{选择ID:2，选择文本:'选择 1-2'},{选择ID:3，选择文本:'选择 1-3'},{选择ID:4，选择文本:'选择 1-4'}],答案:空},{文本:'问题 2'，选择:[{选择ID:21，选择文本:'选择 2-1'},{选择ID:22，选择文本:'选择 2-2'},{选择ID:23，选择文本:'选择 2-3'},{选择ID:24，选择文本:'选择 2-4'},],答案:空},{文本:'问题 3'，选择:[{选择ID:31，选择文本:'选择 3-1'},{选择ID:32，选择文本:'选择 3-2'},{选择ID:33，选择文本:'选择 3-3'},{选择ID:34，选择文本:'选择 3-4'},],答案:空}]}公共表演前():无效{this.slides.lockSwipes(false);this.slides.slidePrev(500);this.slides.lockSwipes(true);}公共 showNext(): 无效 {this.slides.lockSwipes(false);this.slides.slideNext(500);this.slides.lockSwipes(true);}}Let me explain it in detail.Sorry for the question framing.
I've an array of Objects which is stored in the REST API. That array contains questions and choices. Each question has 4 choices which are radio buttons.
I'm trying to display one question at a time on the same page along with the choices of the question. I've 2 buttons "previous" and "forward" which load the question on the same page.
When I click the next button the next question in the array along with the choices are displayed.When I click previous button the previous question is being displayed but not "with the checked radio button". Now my requirement is that the radio button checked in the previous question has to remain checked even after going to next question and when I click previous it has to show me which radio button have I checked.
I'm trying to use [checked] option available with the radio button.But I'm not able to get it.Here is my code:
<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>
Initially the indexVal=0 which means it is pointing to the first question.On clicking the next button it becomes indexVal+=1 and for previous it becomes indexVal-=1;
here is my typescript code. I'm trying to maintain an array called "answers" which stores the selected choice.
storeChoice(choiceId, questions[indexVal])
{
questions[indexVal].answers[0] = choiceId;
}
check(questions[indexVal])
{
return questions[indexVal].answers[0];
}
Instead of using the selectedChoice property for all the checks, you can bind the answer to the questions[index].answer.
Please take a look at this working plunker
This is the result:
As you can see in that plunker, I'm binding the answer to the question.answer directly:
<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>
Please also notice that I'm using a slider to add a nice effect when changing the questions.
View code
<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>
Component code
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'
},
],
answer: null
},
{
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);
}
}
这篇关于Angular2，Typescript:如何在每页显示一个元素的数组中检查单选按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
