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

Posted 2023-03-13

【中文标题】Angular2，Typescript：如何在每页显示一个元素的数组中检查单选按钮？

【英文标题】：Angular2,Typescript: How to put the radio button checked when in an array which displays one element per page?

【发布时间】：2017-11-11 08:30:59

【问题描述】：

让我详细解释一下。对不起，问题框架。

我有一个存储在 REST API 中的对象数组。该数组包含问题和选择。每个问题都有 4 个选项，它们是单选按钮。

我试图在同一页面上一次显示一个问题以及问题的选择。我有 2 个按钮“上一个”和“前进”，它们在同一页面上加载问题。

当我单击下一个按钮时，会显示数组中的下一个问题以及选项。当我单击上一个按钮时，会显示上一个问题，但不会显示“选中的单选按钮”。 现在我的要求是，即使在转到下一个问题之后，在上一个问题中选中的单选按钮也必须保持选中状态，并且当我单击上一个时，它必须显示我选中了哪个单选按钮。

我正在尝试使用单选按钮提供的 [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>

最初 indexVal=0 表示它指向第一个问题。单击下一个按钮时，它变为 indexVal+=1，而对于上一个按钮，它变为 indexVal-=1；

这是我的打字稿代码。我正在尝试维护一个名为“answers”的数组，用于存储所选选项。

    storeChoice(choiceId, questions[indexVal])

      questions[indexVal].answers[0] = choiceId;



check(questions[indexVal])

  return questions[indexVal].answers[0];

【参考方案1】：

您可以将答案绑定到questions[index].answer，而不是使用selectedChoice 属性进行所有检查。 请查看this working plunker

这是结果：

正如您在那个 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>

还请注意，我在更改问题时使用了一个滑块来添加一个很好的效果。

查看代码

<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'
            ,

          ],
        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);
  

【讨论】：

非常感谢。它运行良好。我为此苦苦挣扎了将近 3 天。非常感谢。

如果我使用复选框代替单选按钮，您能否帮我解决一下 [(ngModel)]=" " 应该是什么？如果我放置 [(ngModel)]="question.answer" （其中 answer 是一个数组），则无论我检查什么，所有复选框都会得到标记。

抱歉，工作一整天...我在另一个 SO 问题中添加了答案。

【参考方案2】：

您的 check 函数需要返回在您的情况下不需要的布尔值。 请检查以下代码：

<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>

并且不要将 answers 作为一个数组，而是让它具有简单的属性并像下面这样使用它：

 storeChoice(choiceId, questions[indexVal])
 
   questions[indexVal].answers = choiceId;
  

check(questions[indexVal],choiceId)

   return questions[indexVal].answers === choiceId;

希望对你有帮助！

【讨论】：

您是否遇到任何错误，或者它根本不起作用。如果你能创建一个 plunker，我会修复它。

很抱歉，无法提供 plunkr。代码非常冗长，而且问题中的数据来自 REST API