获取字符串而不是数字

时间:2019-02-18 05:59:36

标签: javascript arrays json ionic3

我正在开发一个基于“字符串”而不是变量“ number”的测验应用程序。我尝试了不同的语法,但它只显示空白,没有显示数据/错误。如您在下面看到的代码所示,我将为您提供所需的示例逻辑。

if(answer.correct == "answerstring"){displayvariable == "STRINGTOBEDISPLAYED"};

这是我的“ question.json”

{
    "questions": [

        {
            "flashCardFront": "<img src='assets/questionimg/12_plate1.gif' />",
            "flashCardBack": "12",
            "flashCardFlipped": false,
            "questionText": "What number is this?",
            "answers": [
                {"answer": "12", "correct": true, "selected": false},
                {"answer": "17", "correct": false, "selected": false},
                {"answer": "NOTHING", "correct": false, "selected": false}
            ]
        },
        {
            "flashCardFront": "<img src='assets/questionimg/8_plate2.gif' />",
            "flashCardBack": "8",
            "flashCardFlipped": false,
            "questionText": "What is number is this?",
            "answers": [
                {"answer": "3", "correct": false, "selected": false},
                {"answer": "8", "correct": true, "selected": false},
                {"answer": "NOTHING", "correct": false, "selected": false}
            ]
        },
        {
            "flashCardFront": "<img src='assets/questionimg/29_plate3.gif' />",
            "flashCardBack": "29",
            "flashCardFlipped": false,
            "questionText": "What is this?",
            "answers": [
                {"answer": "70", "correct": false, "selected": false},
                {"answer": "NOTHING", "correct": false, "selected": false},
                {"answer": "29", "correct": true, "selected": false}
            ]
        }

    ]
}

我的数据提供者所在的data.ts。

import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import { HttpClient } from '@angular/common/http';

/*
  Generated class for the DataProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class DataProvider {


  data: any;

  constructor(public http: HttpClient) {

  }

  load(){

    if(this.data){
        return Promise.resolve(this.data);
    }

    return new Promise(resolve => {

      this.http.get('assets/data/questions.json').subscribe((data:any) => {
            this.data = data.questions;
            resolve(this.data);
      });

    });

  }

}

正在处理测验的我的打字稿

import { Component, ViewChild} from '@angular/core';
import { NavController} from 'ionic-angular';
import { DataProvider } from '../../providers/data/data';

/**
 * Generated class for the IshiharaQuestionsPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@Component({
  selector: 'page-ishihara-questions',
  templateUrl: 'ishihara-questions.html',
})

export class IshiharaQuestionsPage {

  @ViewChild('slides') slides: any;

    hasAnswered: boolean = false;
    score: number = 0;
    cvd: string;

    slideOptions: any;
    questions: any;

  constructor(public navCtrl: NavController, public dataService: DataProvider) {
  }

  ionViewDidLoad() {

    this.slides.lockSwipes(true);

    this.dataService.load().then((data) => {

        data.map((question) => {

            let originalOrder = question.answers;
            question.answers = this.randomizeAnswers(originalOrder);
            return question;

        });     

        this.questions = data;

    });

  }

  nextSlide(){
    this.slides.lockSwipes(false);
    this.slides.slideNext();
    this.slides.lockSwipes(true);
  }

  selectAnswer(answer, question){

    this.hasAnswered = true;
    answer.selected = true;
    question.flashCardFlipped = true;

    if(answer.correct){
        this.score++;
    }
    setTimeout(() => {
        this.hasAnswered = false;
        this.nextSlide();
        answer.selected = false;
        question.flashCardFlipped = false;
    }, 3000);
  }


  randomizeAnswers(rawAnswers: any[]): any[] {

    for (let i = rawAnswers.length - 1; i > 0; i--) {
        let j = Math.floor(Math.random() * (i + 1));
        let temp = rawAnswers[i];
        rawAnswers[i] = rawAnswers[j];
        rawAnswers[j] = temp;
    }

    return rawAnswers;

  }

  restartQuiz() {
    this.score = 0;
    this.slides.lockSwipes(false);
    this.slides.slideTo(1, 1000);
    this.slides.lockSwipes(true);
  }
}

这是我要显示该字符串的地方。

<ion-slide>
        <ion-card>
          <h2 text-justify padding>The 24 plate quiz suggests that you might currenly belong to this CVD type:</h2>
          <br>
          <br>
          <br>
          <h1 color="danger">{{cvd}}</h1> <<-----------------THIS LINE
          <br>
          <br>
          <br>
          <h2>Final Score: {{score}}/24</h2>
          <button (click)="restartQuiz()" ion-button full color="primary">Start Again</button>
        </ion-card>
      </ion-slide>

1 个答案:

答案 0 :(得分:0)

离子语法基本上使用TypeScript或更类似于Angular(JS / 2 +)代码,在Angular(JS / 2 +)中用于字符串比较或检查是否相等,我们使用'==='(等于三倍)而不是'=='。请用'==='替换'==',它应该可以正常运行。