angular - Angular2, Typescript: Hvordan sætter man radioknappen til at være markeret, når den er i et array, som viser ét element per side?

Lad mig forklare det i detaljer. Undskyld for den måde, jeg stillede spørgsmålet på.

Jeg har et array af objekter, som er gemt i REST API'en. Dette array indeholder spørgsmål og valgmuligheder. Hvert spørgsmål har 4 valgmuligheder, som er radioknapper.

Jeg prøver at vise ét spørgsmål ad gangen på samme side sammen med valgmulighederne til spørgsmålet. Jeg har 2 knapper 'forrige' og 'frem', som indlæser spørgsmålet på samme side.

Når jeg klikker på næste-knappen, vises det næste spørgsmål i arrayet sammen med valgmulighederne. Når jeg klikker på forrige-knappen, vises det forrige spørgsmål, men ikke "med den markerede radioknap". Nu er mit krav, at den radioknap, der blev markeret i det forrige spørgsmål, skal forblive markeret, selv efter at jeg går til næste spørgsmål, og når jeg klikker på forrige, skal det vise mig, hvilken radioknap jeg har markeret.

Jeg prøver at bruge [checked] indstillingen, der er tilgængelig med radioknappen. Men jeg kan ikke få det til. Her er min kode:

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

I starten er indexVal=0, hvilket betyder, at den peger på det første spørgsmål. Når man klikker på næste knap, bliver det indexVal+=1, og for forrige bliver det indexVal-=1;

her er min typescript-kode. Jeg prøver at opretholde et array kaldet "answers", som gemmer det valgte valg.

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

}

check(questions[indexVal])
{
  return questions[indexVal].answers[0];
}

Svar #1

I stedet for at bruge selectedChoice-egenskaben til alle tjek, kan du binde svaret til questions[index].answer. Tag venligst et kig på dette fungerende plunker

Dette er resultatet:

Som du kan se i den plunker, binder jeg svaret direkte til 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>

Bemærk også, at jeg bruger en skyder til at tilføje en flot effekt, når jeg skifter spørgsmål.

Se kode

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

Komponentkode

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);
  }

}

Svar #2

Din check-funktion skal returnere den boolske værdi, hvilket den i dit tilfælde ikke gør. Tjek venligst koden nedenfor:

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

Og i stedet for at lave svar som et array, skal du have det som en simpel ejendom og bruge det som nedenfor:

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

check(questions[indexVal],choiceId)
{
   return questions[indexVal].answers === choiceId;
}

Håber det hjælper!!

Relaterede artikler