Angular2，Typescript：如何在每页显示一个元素的数组中选中单选按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44455814/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular2,Typescript: How to put the radio button checked when in an array which displays one element per page?
提问by Impromptu_Coder
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.
我有一个存储在 REST API 中的对象数组。该数组包含问题和选择。每个问题有 4 个选项，它们是单选按钮。
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.
我试图在同一页面上一次显示一个问题以及问题的选择。我有 2 个按钮“上一个”和“前进”，它们在同一页面上加载问题。
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:
我正在尝试使用单选按钮提供的 [checked] 选项。但我无法获得它。这是我的代码：
<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;
最初 indexVal=0 这意味着它指向第一个问题。单击下一个按钮时，它变为 indexVal+=1，上一个它变为 indexVal-=1；
here is my typescript code. I'm trying to maintain an array called "answers" which stores the selected choice.
这是我的打字稿代码。我正在尝试维护一个名为“answers”的数组，该数组存储所选的选项。
storeChoice(choiceId, questions[indexVal])
{
questions[indexVal].answers[0] = choiceId;
}
check(questions[indexVal])
{
return questions[indexVal].answers[0];
}
采纳答案by sebaferreras
Instead of using the selectedChoiceproperty for all the checks, you can bind the answer to the questions[index].answer.
Please take a look at this working plunker
除了使用的selectedChoice财产所有的检查，可以绑定的答案questions[index].answer。请看看这个工作的plunker
This is the result:
这是结果：
As you can see in that plunker, I'm binding the answer to the question.answerdirectly:
正如您在那个 plunker 中看到的那样，我将答案question.answer直接绑定到：
<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);
}
}
回答by Jayakrishnan
Your checkfunction needs to return the boolean value which in your case doesn't. Please check below code:
您的检查函数需要返回布尔值，而在您的情况下则不需要。请检查以下代码：
<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],choiceObj.choiceId)"/>
<label [for]='choiceObj'> {{choiceObj.choiceText}} </label>
</span>
</div>
And instead of making answersas an array, have it simple property and use it like below:
而不是将答案作为数组，而是拥有简单的属性并使用它，如下所示：
storeChoice(choiceId, questions[indexVal])
{
questions[indexVal].answers = choiceId;
}
check(questions[indexVal],choiceId)
{
return questions[indexVal].answers === choiceId;
}
Hope it helps!!
希望能帮助到你！！
