I’m trying to implement an App with some Questions. The User have to select an option. When the user have to navigate a page back so the previous radio buttons have to stay “checked”. But in HTML it’s does’nt display “checked”. But its checked!
Please let me know, what I make wrong.
This is my HTML
<ion-item *ngFor="let op of question.body; let i = index">
<ion-label>
<div>{{op}}</div>
</ion-label>
<ion-radio [checked]="antworten[currentQuestion]===op? true: false"(ionSelect)="answerRadioButton(question.id,op)></ion-radio>
</ion-item>
</ion-radio-group>
</ion-item>
This is my TS
showQuestion(index: number) {
this.select = this.antworten[index];
if (!this.select) {
this.questionIsAnswered = false;
} else {
this.questionIsAnswered = true;
}
this.question = this.question[index];
}
answerRadioButton(question, answer) {
this.antworten[question.id] = answer;
this.questionIsAnswered = true;
}
**THIS IS NOT WORKING **
[checked]="antworten[currentQuestion]===op? true: false"
Hello,
Can you provide your full TS code ?
Hello,
of course. this is the full TS code
import { Component, OnInit } from '@angular/core';
import { Input } from '@angular/core';
import { ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { NavController, IonProgressBar } from '@ionic/angular';
import { Location } from '@angular/common';
import { QuestionService } from '../question.service';
import { Question } from '../Question';
import { QUESTIONS } from '../m-questions';
import { HighlightDelayBarrier } from 'blocking-proxy/built/lib/highlight_delay_barrier';
import { analyzeAndValidateNgModules } from '@angular/compiler';
@Component({
selector: 'app-question',
templateUrl: './question.page.html',
styleUrls: ['./question.page.scss'],
})
export class QuestionPage implements OnInit {
size = 20;
currentQuestion: number = 0;
antworten: String[];
question: Question;
questions: Question[];
Selection : String;
private questionService: QuestionService;
questionIsAnswered: boolean = false;
/** */
showQuestion(index: number) {
this.Selection = this.antworten[index];
if (!this.Selection) {
this.questionIsAnswered = false;
} else {
this.questionIsAnswered = true;
}
this.question = this.questions[index];
}
constructor(public location: Location,
public router: Router,
public navCtrl: NavController,
questionService: QuestionService
) {
this.questionService = questionService;
}
getQuestions(): void {
this.questions = this.questionService.getQuestions();
//this.questions = QUESTIONS;
for (var i = 0; i < this.questions.length; i++) {
this.questions[i].id = i;
}
}
ngOnInit() {
this.getQuestions();
this.question = this.questions[0];
this.antworten= [];
}
nextPage() {
this.currentQuestion = this.currentQuestion + 1;
if (this.currentQuestion >= this.questions.length) {
this.currentQuestion = this.questions.length - 1;
}
this.showQuestion(this.currentQuestion);
if (this.questions.length - 1 <= this.currentQuestion) {
document.getElementById("overView").style.visibility = 'visible';
document.getElementById('next').style.visibility = 'hidden';
}else{
document.getElementById("overView").style.visibility = 'hidden';
}
if (this.question.id >= 21) {
document.getElementById("title2").style.visibility = 'visible';
}
if(this.currentQuestion >= 1){
document.getElementById('iconArrowBack').style.visibility='visible';
}
}
/** */
goBack() {
if (this.currentQuestion > 0) {
this.currentQuestion = this.currentQuestion - 1;
if (this.currentQuestion >= this.questions.length) {
this.currentQuestion = this.questions.length + 1;
}
this.showQuestion(this.currentQuestion);
document.getElementById('next').style.visibility = 'visible';
}
if (this.antworten[this.question.id]){
return this.antworten;
}
}
answerRadioButton(question, answer) {
this.antworten[question.id] = answer;
this.questionIsAnswered = true;
}
goToOverview() {
if (this.questions.length - 1 <= this.currentQuestion) {
this.questionService.setAnswer(this.antworten);
this.navCtrl.navigateForward('/overview')
}
}
}
I think I’m wrong.
The selected Options are saved in an array answers[]. When i go back to question 1 i get the selected option from answers[] and set the corresponding radio button checked, in this example option 4. But all radio buttons shows unchecked.
Maybe an event overwrites the checked property?
Since this is a issue in the view, I would like to see your view HTML file as well? Also, why are you selecting elements by their ID? You should be using *ngIf directive and make them conditional.
For the buttons I found it “ok” selecting the elements by their ID.
For the radio buttons i using now *ngif;
<div *ngIf="antworten[currentQuestion]==op">
<ion-radio [checked]="true" (ionSelect)="answerRadioButton(question.id,op)" ></ion-radio>
</div>
<div *ngIf="antworten[currentQuestion] != op">
<ion-radio [checked]="false" (ionSelect)="answerRadioButton(question.id,op)" ></ion-radio>
</div>
then i get the following error-message
There are quite a few confusing things here for me…
Where is antworten declared? You are returning this.antworten but it isn’t declared as an instance variable.
Also, the use of String is not recommended. See https://stackoverflow.com/questions/14727044/typescript-difference-between-string-and-string
I wonder if that isn’t screwing things up… it appears String is a wrapper object around a string, so I wonder if === does not work as you expect when comparing strings.
1 Like
I have translate the code section for this post, but forgot it on some parts. antworten was declared as answers but i renamed it in antworten now.
Using document.getElementById() kinda defeats the purpose of using an MVC. All stuff could have been in one single file then.
Also, it looks like your view is cached. I think you need to use ionViewWillEnter().
