获取角度的输入值

时间:2019-03-12 11:28:48

标签: angular typescript ionic-framework

我试图在没有任何用户输入的情况下获取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>

0 个答案:

没有答案