Angular2: EXCEPTION: Attempt to use a dehydrated detector: QuizzPage_2 -> select - exception

Question

I'm having an issue in my ionic2/angular2 app.
I'm building a quizz app, in which the user is prompted to answer questions, on radio choices.
The moment the first choice is made, I get this error:
EXCEPTION: Attempt to use a dehydrated detector: QuizzPage_2 -> select
The console:
The code breaks here when I debug Pause On Exception:
SafeSubscriber.prototype.__tryOrUnsub = function (fn, value) {
try {
fn.call(this._context, value);
}
catch (err) {
this.unsubscribe();
throw err;
Here are my main files:
The page.html:
(...)
<ion-item radio-group *ngFor="#choice of quizz.getChoices()">
<ion-label>
<p courant>{{ choice }}</p>
</ion-label>
<ion-radio (click)="onSubmit($event, choice)">
{{ choice }}
</ion-radio>
</ion-item>
(...)
My page.ts:
import {Page, NavController, NavParams} from 'ionic-angular';
import {Quizz} from '../models/quizz';
import {QuizzResultsPage} from './quizz-results.page';
import quizzes from '../../data/quizzes';
#Page({
templateUrl: 'build/pages/quizz/Quizzes/templates/quizz.page.html',
})
export class QuizzPage {
nav;
quizz;
constructor(nav: NavController, params: NavParams) {
this.nav = nav;
// Load the quizz with passed topicId from the params.get (import{NavParams})
this.quizz = this.loadQuizz(params.get('topicId'));
}
loadQuizz(topicId) {
// cont quizz = data (import quizzes from '../../data/quizzes';)
const quizz = quizzes.filter((quizz) => {
return quizz.topicId === topicId;
})[0];
return new Quizz(quizz);
}
onSubmit(event, answer) {
this.quizz.submitAnswer(answer);
if (this.quizz.isCompleted) {
this.nav.push(QuizzResultsPage, {
quizz: this.quizz
});
}
}
}
I'm still able to finish the quizz, but in the end in my result page, I can't go back or restart the quizz, and my navbar breaks...
My resultpage.html:
(...)
<ion-card-content>
<p>
Votre score:
<span primary>{{ quizz.getScore() }}</span> / <b>{{ quizz.getGradingScale() }}</b>
</p>
</ion-card-content>
</ion-card>
<!-- Questions with answers -->
<div [hidden]="quizz.isPerfect()">
<ion-card *ngFor="#i of quizz.items" style="background-color:aliceblue;">
<ion-card-header>
<b bluegray text-uppercase>Question: </b>
<p>
{{ i.question }}
</p>
</ion-card-header>
<ion-card-content>
<b bluegray text-uppercase>Réponse:</b>
<p courant text-justify>{{ i.answer }}</p>
</ion-card-content>
</ion-card>
</div>
<!-- Exit & Restart -->
<div padding style="width:70%; margin: 0 auto">
<button item-right block (click)="onHomeClicked($event)">Recommencer
<ion-icon name="refresh-circle"></ion-icon>
</button>
<button itel-left block (click)="onGoHome($event)">Accueil
<ion-icon name="home"></ion-icon>
</button>
</div>
</ion-content>
And finally my results.ts:
import {Page, NavController, NavParams} from 'ionic-angular';
import {TopicsPage} from '../../topics';
import {Home} from '../../../home/home';
#Page({
templateUrl: 'build/pages/quizz/Quizzes/templates/quizz-results.page.html',
})
export class QuizzResultsPage {
nav;
quizz;
constructor(nav: NavController, params: NavParams) {
this.quizz = params.get('quizz');
this.nav = nav;
this.nav.pop();
}
onHomeClicked(event) {
this.nav.setRoot(TopicsPage);
this.nav.pop(TopicsPage);
}
onGoHome(event){
this.nav.setRoot(Home);
this.nav.pop(Home);
}
Someone have an idea? Thanks