Comportamento incomum de ngFor
Hoje eu estava tentando ngFor diretiva angular. O problema que estou enfrentando é que, quando seleciono qualquer caixa de seleção (por exemplo, 0) e clico em "próximo", se a próxima pergunta também tiver a mesma opção (0) que selecionei na pergunta anterior, ela será verificada automaticamente, não saber como?? [Esse comportamento não é visto se duas ou mais perguntas consecutivas não tiverem pelo menos uma mesma opção. ] Espero que faça sentido. aqui está o meuplunker
modelo:
{{question}}
<div *ngFor="let option of options">
<input type="checkbox">{{option}}<br>
</div>
<button (click)="onNext()">next</button>
Component.ts
export class App implements OnInit {
private questionPaper = {
questions: [{
_id: "59d1cbd4f8a709358c045696",
question: "2 + 3",
__v: 0,
answers: [
"5"
],
options: [
"0",
"1",
"5",
"3",
"6"
]
},
{
_id: "59d1cbf7f8a709358c045698",
question: "1 * 3",
__v: 0,
answers: [
"3"
],
options: [
"1",
"3",
"0",
"4"
]
},
{
_id: "59d1cc18f8a709358c045699",
question: "3 - 3",
__v: 0,
answers: [
"0"
],
options: [
"3",
"0",
"6",
"4",
"7"
]
},
{
_id: "59d1cc3ef8a709358c04569a",
question: "6 - 4",
__v: 0,
answers: [
"2"
],
options: [
"2",
"3",
"4",
"0",
"6"
]
},
{
_id: "59d1cc71f8a709358c04569b",
question: "4 * 8",
__v: 0,
answers: [
"32"
],
options: [
"4",
"8",
"12",
"32",
"23"
]
},
{
_id: "59d1cc96f8a709358c04569c",
question: "0 * 1",
__v: 0,
answers: [
"0"
],
options: [
"0",
"1",
"10",
"-1",
"4"
]
},
{
_id: "59d1cccdf8a709358c04569d",
question: "6 + 6",
__v: 0,
answers: [
"12"
],
options: [
"6",
"12",
"21",
"0"
]
},
{
_id: "59d1fb6a253c5270115f4ced",
question: "1 + 10",
__v: 0,
answers: [
"11"
],
options: [
"11"
]
}
]
};
private question;
private options = [];
private currentQuesNumber = 1;
onInit() {}
constructor() {
this.question = this.questionPaper.questions[0].question;
this.options = this.questionPaper.questions[0].options;
}
onNext() {
if (this.currentQuesNumber >= this.questionPaper.questions.length) {
this.loadQuestion(this.questions.length);
} else {
this.currentQuesNumber = this.currentQuesNumber + 1;
this.loadQuestion(this.currentQuesNumber);
}
}
loadQuestion(quesNumbToLoad) {
if (quesNumbToLoad > 0 && quesNumbToLoad <= this.questionPaper.questions.length) {
this.question = this.questionPaper.questions[quesNumbToLoad - 1].question;
this.options = this.questionPaper.questions[quesNumbToLoad - 1].options;
}
}
}