我试图在没有任何用户输入的情况下获取theAnswer
模型的值,而是设置一个默认值并将其设置为{{item.TheCorrectAnswer}}
,该值来自数据库服务器。我正在使用TheAnswer的输入值,将它与打字稿文件中的其他输入selectAnswer
进行比较,if selectAnswer == theAnswer
将会迭代得分。
打字稿:
import {
Component,
OnInit
} from '@angular/core';
import {
CrudService
} from './../../services/crud.service';
@Component({
selector: 'app-category-one',
templateUrl: './category-one.page.html',
styleUrls: ['./category-one.page.scss'],
})
export class CategoryOnePage implements OnInit {
quizzes: any;
quizCategory: string;
quizQuestion: string;
quizAnswer1: string;
quizAnswer2: string;
selectAnswer: string[];
theAnswer: string[];
score: number;
constructor(private crudService: CrudService) {}
ngOnInit() {
this.theAnswer = [];
this.selectAnswer = [];
this.score = 0;
this.crudService.read_Quizzes().subscribe(data => {
this.quizzes = data.map(e => {
return {
id: e.payload.doc.id,
isEdit: false,
Category: e.payload.doc.data()['Category'],
Question: e.payload.doc.data()['Question'],
Quiz1: e.payload.doc.data()['Quiz1'],
Quiz2: e.payload.doc.data()['Quiz2'],
Quiz3: e.payload.doc.data()['Quiz3'],
Quiz4: e.payload.doc.data()['Quiz4'],
CorrectAnswer: e.payload.doc.data()['CorrectAnswer'],
};
})
});
countScore() {
for (let i = 0; i < 5; i++) {
if (this.selectAnswer[i] == this.theAnswer[i]) {
this.score++;
}
}
}
}
}
html:
<ion-list *ngFor="let item of quizzes;let i = index">
<div *ngIf="i<5">
<ion-label style="color:#fff; font-size: 25px;font-weight: bold;">{{i + 1}}.) {{item.Question}}</ion-label>
<ion-item>
<ion-input style="color:#fff;" placeholder="a,b,c,d" [(ngModel)]="selectAnswer[i]" name="selectAnswer{{i}}"></ion-input>
</ion-item>
<p style="color:#fff; font-size: 12px;"> a.) {{item.Quiz1}}</p>
<p style="color:#fff; font-size: 12px;"> b.) {{item.Quiz2}}</p>
<p style="color:#fff; font-size: 12px;"> c.) {{item.Quiz3}}</p>
<p style="color:#fff; font-size: 12px;"> c.) {{item.Quiz4}}</p>
</div>
<ion-input value="{{item.CorrectAnswer}}" placeholder="{{item.CorrectAnswer}}" style="color:#fff;" name="theAnswer{{i}}" [(ngModel)]="theAnswer[i]"></ion-input>
</ion-list>