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个按钮上一个和前进，可以在同一页面上加载问题。
当我点击下一个按钮时，会显示数组中的下一个问题以及选项。当我点击上一个按钮时，前一个问题正在显示但不是带有选中的收音机按钮。
现在我的要求是，即使在转到下一个问题之后，上一个问题中选中的单选按钮也必须保持检查状态，当我点击之前它必须显示我检查了哪个单选按钮时。
我正在尝试使用单选按钮提供的[已选中]选项。但是我无法得到它。这是我的代码：
< 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>上一个< / 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];
}
而不是使用<$所有支票的c $ c> selectedChoice 属性，您可以将答案绑定到问题[index] .answer 。
请查看
正如你在那个plunker中看到的那样，我直接绑定 question.answer 的答案：
< ion-list radio-group [（ngModel）] =question.answer>
< ion-item no-lines no-padding * ngFor =let let of question.choices>
< ion-label> {{choice.choiceText}}< / ion-label>
< ion-radio [value] =choice>< / ion-radio>
< / ion-item>
< / ion-list>
请注意我在更改问题时使用滑块添加效果很好。
查看代码
< ion - 内容填充>
< ion-slides>
< ion-slide * ngFor =让问题问题;让我=索引>
< h1> {{question.text}}< / h1>
< ion-list radio-group [（ngModel）] =question.answer>
< ion-item no-lines no-padding * ngFor =let let 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;>选定答案：{{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 [disabled] =！question.answer* ngIf =i === questions.length - 1（click）=showNext（）ion-button text-only> Submit< /按钮>
< / ion-col>
< / ion-row>
< / ion-slide>
< / ion-slides>
< / ion-content>
组件代码
从'@ angular / core'导入{Component，ViewChild};来自'ionic-angular'的
import {NavController，Content，Slides};
@Component（{...}）
导出类主页{
@ViewChild（幻灯片）幻灯片：幻灯片;
公共问题：数组< {text：string，answer：number，choices：Array< {choiceId：number，choiceText：string}> }>
ngOnInit（）{
this.slides.lockSwipes（true）;
}
构造函数（）{
this.questions = [
{
text：'Question 1'，
选择：[
{
choiceId：1，
choiceText：'选择1-1'
}，
{
choiceId：2，
choiceText：'选择1-2'
}，
{
choiceId：3，
choiceText：'选择1-3'
}，
{
choiceId：4，
choiceText：'选择1-4'
}
]，
回答：null
}，
{
text：'Question 2'，
choice：[
{
choiceId：21，
choiceText：'Choice 2-1'
}，
{
choiceId：22，
choiceText：'Choice 2-2'
}，
{
choiceId：23，
choiceText：'选择2-3'
}，
{
choiceId：24，
choiceText：'选择2- 4'
}，
]，
回答：null
}，
{
text：'Question 3'，
选择：[
{
choiceId：31，
choiceText：'选择3-1'
}，
{
choiceId：32，
choiceText：'选择3-2'
}，
{
choiceId：33，
choiceText：'选择3-3'
}，
{
choiceId：34，
choiceText：'选择3-4'
}，
]，
答案：null
}
]
}
public showPrevious（）：void {
this.sli des.lockSwipes（假）;
this.slides.slidePrev（500）;
this.slides.lockSwipes（true）;
}
public showNext（）：void {
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屋！
