Angular2,Typescript：如何在一个每页显示一个元素的数组中检查单选按钮？

让我详细解释一下.对问题框架进行解释.

我有一个存储在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

这是结果：

正如你在那个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);
  }
 
}

Angular2,Typescript：如何在一个每页显示一个元素的数组中检查单选按钮？

猜你在找的Angularjs相关文章