Angular ionic firebase数据库值更改

我在firebase中更改密钥的名称。 首先，我有这样的json结构

"Question1" : {
"rather" : "Go outisde",
"ratherclick" : 6,
"would" : "Stay in home",
"wouldclick" : 6
},

现在我把名字改成

"Question5" : {
"answer2" : "Go outisde",
"answer2click" : 6,
"answer1" : "Stay in home",
"answer1click" : 6
},

它以前工作得很好。应用程序的功能是当用户点击问题时出现问题，显示所有用户点击的百分比。我更改了代码，但它不显示百分比，只显示NAN

这个是.html

<!--
  Generated template for the NewpPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header color="grey">

  <ion-navbar color="grey" center>
        <ion-buttons left>
        <button ion-button icon-only (click)="back()">
          <ion-icon name="md-arrow-back"></ion-icon>
        </button>
          </ion-buttons>

    <ion-title >Would You Rather ?</ion-title>
    <ion-buttons class="bttn" right><button right class="bttn" (click)="presentPrompt()">  <ion-icon color="light" name="md-more"></ion-icon></button></ion-buttons>
  </ion-navbar>

</ion-header>


<ion-content  class="background">

    <ion-slides *ngIf="questions" #slides (ionSlideDidChange)="slideChanged()" class="slidee">



        <ion-slide *ngFor="let question of questions | async; let i = index;" >
           <!--  <div class="orca">
                                      this is for or round 

              </div> -->
            <!-- <h3>Question {{i+1}}</h3> -->
          <div class="quizcontainer" >

          <div class="upperr" text-center (click)="show(question.ckc)" (click)="clickedButton(1,question.answer1)" >
                <p *ngIf="showclicks" style="color: white" item-end class="p11">{{ clickPercentage1 }}% </p>
                <div class="anotherr"><p  class="q1" style="text-align: center;">{{question.answer1}}</p> </div>

          </div>

          <div class="or" style="color: white" ><p class="pp">OR </p></div>


          <div class="down" text-center (click)="show(question.ckc)" (click)="clickedButton(2,question.answer2)" >
                  <p *ngIf="showclicks" style="color: white" item-end class="p1">{{ clickPercentage2 }}% </p>
             <div class="another"> <p  class="q1" >{{question.answer2}}</p></div>
          </div>

          </div>


        </ion-slide>



      </ion-slides>

</ion-content>

你愿意吗？
{{{clickPercentage1}}%

{{{question.answer1}}
或
{{{clickPercentage2}}%

{{question.answer2}

这是我的

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { ActionSheetController } from 'ionic-angular';
import { AlertController } from 'ionic-angular';
import { AngularFireDatabase } from 'angularfire2/database';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
// import { Storage } from '@ionic/storage';
import * as firebase from 'firebase';
import { Slides } from 'ionic-angular';
import { Home1Page } from '../home1/home1';

import { LocalStorage } from '@ngx-pwa/local-storage';

@IonicPage()
@Component({
  selector: 'page-newp',
  templateUrl: 'newp.html',
})
export class NewpPage {

  @ViewChild('slides') slides: Slides;

    slideOptions: any;
  cli:any;
  showclicks:boolean;
  hideMe: any;
  clickvalue1: number;
  clickvalue2: number;
  clickPercentage1: number;
  clickPercentage2: number;

  answer1clicks: number = 0;
  answer2clicks: number = 0;
  question_str: any;
  item_key: any;
  firebase_flag: boolean;

  questions:Observable<any>;
  wouldquestion : any;
  ratherquestion : any;

  range : number = 0;
  callfor : number = 0;

  constructor(public navCtrl: NavController,private alertCtrl: AlertController, 
    public navParams: NavParams, public actionSheetCtrl: ActionSheetController,  
    public afd: AngularFireDatabase, public http: HttpClient, 
    private localStorage: LocalStorage //public storage: Storage
    ) {

    this.clickvalue1 =  0;
    this.clickvalue2 = 0;
    this.clickPercentage1 = 0;
    this.clickPercentage2 = 0;
    this.answer2clicks = 0;
    this.answer1clicks = 0;
    this.cli = "";
    this.showclicks = false;


  } 

  back(){
this.navCtrl.push(Home1Page)
  }

  slideChanged() {
    let currentIndex = this.slides.getActiveIndex();
    console.log('Current index is', currentIndex);

    // Store value into SharedPreference
    //this.storage.set('indexValue', currentIndex);

    this.localStorage.setItem('indexValue', currentIndex)
      .subscribe(
        (result) => {
          console.log(result);
        }
      );
  }

  goToSlide() {
    this.localStorage.getItem<number>('indexValue')
      .subscribe(
        val => {
          console.log("indexValue : "+val);
          if (val != null) {
            this.range = val;
          }
          this.slides.slideTo(this.range, 0);

          setTimeout( () => {
            this.slides.lockSwipes(true);
          }, 2000);
        }
      )

    // this.storage.get('indexValue').then((val) => {
    //     console.log('Index value', val);
    //     if (val != null) {
    //       this.range = val;
    //     }
    //     this.slides.slideTo(this.range, 500);
    // });
  }
  ionViewDidLoad() {
    console.log('ionViewDidLoad NewpPage');

    this.questions = this.afd.list('Questions').valueChanges();      // <=====  Question is coming from there .
    // this.questions.forEach(item => {
    //   console.log('Item:', item);
    // });

    // this.goToSlide();
    var interval = setInterval(()=>{
      this.goToSlide();

      if (this.callfor == 3) {
        clearInterval(interval);
        this.callfor = 0;
      } else {
        this.callfor = this.callfor + 1;
      }
    },500);
  }

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

  presentPrompt() {
  let alert = this.alertCtrl.create({
    title: 'Add Your Question',
    inputs: [
      {
        name: 'would',
        placeholder: 'Would You ',
      },
      {
        name: 'rather',
        placeholder: 'Rather'
      }
    ],
    buttons: [
      {
        text: 'Add',
        role: 'add',
        handler: data => {
          this.wouldquestion = data.would;
          this.ratherquestion = data.rather;
          this.afd.list("Questions/").push({
            answer1:this.wouldquestion,
            answer2:this.ratherquestion,
            answer2click:this.answer2clicks,
            answer1click:this.answer1clicks
          });
        }
      },
          ]
  });
  alert.present();
}




  show(clicks)
  {
    this.showclicks = true;

    if(this.showclicks)
    {
      setTimeout(() => {
        this.nextSlide()
    }, 500);
    }
  }

    clickedButton(index,paramString) 
    {
      this.question_str = paramString

      firebase.database().ref('Questions/').on('value',data => {
         data.forEach( item => 
         {
            if(item.val().answer1 == this.question_str)
            {
              this.item_key = item.key;
              this.firebase_flag = true;
              this.answer1clicks = item.val().answer1click;
              this.answer2clicks = item.val().answer2click;
              this.answer1clicks++;
            }
            else if(item.val().answer2 == this.question_str)
            {
              this.item_key = item.key;
              this.firebase_flag = false;
              this.answer1clicks = item.val().answer1click;
              this.answer2clicks = item.val().answer2click;
              this.answer2clicks++;
            }
         });
    });

    if(this.firebase_flag == true)
    {
    firebase.database().ref('Questions/' + this.item_key).child("answer1click").set(this.answer1clicks);

    }
    else
    {
    firebase.database().ref('Questions/' + this.item_key).child("answer2click").set(this.answer2clicks);

    }
    switch (index) {
      case 1:
        this.clickPercentage1 = Math.round(this.answer1clicks / (this.answer1clicks + this.answer2clicks) * 100);
        this.clickPercentage2 = Math.round(this.answer2clicks / (this.answer1clicks + this.answer2clicks) * 100);
        break;
      case 2:
        this.clickPercentage1 = Math.round(this.answer1clicks / (this.answer1clicks + this.answer2clicks) * 100);
        this.clickPercentage2 = Math.round(this.answer2clicks / (this.answer1clicks + this.answer2clicks) * 100);
        break;
    }
  }

}

从'@angular/core'导入{Component，ViewChild}；
从“离子角度”导入{IonicPage，NavController，NavParams}；
从“离子角度”导入{ActionSheetController}；
从'ionic angular'导入{AlertController}；
从“angularfire2/database”导入{AngularFireDatabase}；
从'@angular/common/http'导入{HttpClient}；
从“rxjs/Observable”导入{Observable}；
//从'@ionic/Storage'导入{Storage}；
从“firebase”导入*作为firebase；
从“离子角度”导入{Slides}；
从“../home1/home1”导入{Home1Page}；
从'@ngx pwa/local storage'导入{LocalStorage}；
@IonicPage（）
@组成部分({
选择器：'page newp'，
templateUrl:'newp.html'，
})
出口类新产品{
@ViewChild（“幻灯片”）幻灯片：幻灯片；
幻灯片选项：任何；
cli：任何；
显示点击：布尔；
希德姆：任何；
单击值1：编号；
单击值2：编号；
单击百分比1：数字；
单击百分比2：数字；
回答1点击：数字=0；
回答2点击：数字=0；
问题:有没有,；
项目编号：任何；
firebase_标志：布尔值；
问题：可观察；
问：有；
问题：有；
范围：数字=0；
callfor:number=0；
构造函数（公共navCtrl:NavController、私有alertCtrl:AlertController、，
公共navParams:navParams，公共actionSheetCtrl:ActionSheetController，
公共afd:AngularFireDatabase，公共http:HttpClient，
专用本地存储：本地存储//公共存储：存储
) {
单击此按钮。单击值1=0；
此参数为0.clickvalue2=0；
此选项。单击百分比1=0；
点击百分比2=0；
this.answer2clicks=0；
这个。回答1点击=0；
this.cli=“”；
this.showclicks=false；
} 
back（）{
this.navCtrl.push（Home1Page）
}
slideChanged（）{
让currentIndex=this.slides.getActiveIndex（）；
log（'当前索引为'，当前索引为'）；
//将值存储到SharedReference中
//this.storage.set（'indexValue'，currentIndex）；
this.localStorage.setItem（'indexValue'，currentIndex）
.订阅(
（结果）=>{
控制台日志（结果）；
}
);
}
goToSlide（）{
this.localStorage.getItem（'indexValue'）
.订阅(
val=>{
console.log（“indexValue:+val”）；
如果（val！=null）{
这个范围=val；
}
this.slides.slideTo（this.range，0）；
设置超时（（）=>{
这个。幻灯片。锁滑动（真）；
}, 2000);
}
)
//this.storage.get（'indexValue'）。然后（（val）=>{
//log（'Index value'，val）；
//如果（val！=null）{
//这个范围=val；
//     }
//this.slides.slideTo（this.range，500）；
// });
}
ionViewDidLoad（）{
log（'ionViewDidLoad NEWPAGE'）；
this.questions=this.afd.list（'questions'）.valueChanges（）；//{
//console.log（'Item:'，Item）；
// });
//this.goToSlide（）；
var interval=setInterval（（）=>{
this.goToSlide（）；
if（this.callfor==3）{
间隔时间；
这个.callfor=0；
}否则{
this.callfor=this.callfor+1；
}
},500);
}
nextSlide（）{
this.showclicks=false；
这是。幻灯片。锁滑动（错误）；
this.slides.slideNext（）；
这个。幻灯片。锁滑动（真）；
}
presentPrompt（）{
让alert=this.alertCtrl.create({
标题：“添加您的问题”，
投入：[
{
姓名：'会'，
占位符：“你愿意吗？”，
},
{
名称：'相当'，
占位符：“宁愿”
}
],
按钮：[
{
文本：“添加”，
角色：“添加”，
处理程序：数据=>{
this.wouldquestion=data.would；
this.ratherquestion=data.reat；
这个.afd.list（“问题/”）.push({
回答1：这个问题，
回答2：这个问题，
回答2点击：这个，回答2点击，
回答1点击：这个。回答1点击
});
}
},
]
});
alert.present（）；
}
显示（点击）
{
this.showclicks=true；
如果（此.showclicks）
{
设置超时（（）=>{
this.nextSlide（）
}, 500);
}
}
Clicked按钮（索引，参数字符串）
{
this.question_str=paramString
firebase.database（）.ref（'Questions/'）。on（'value'，data=>{
data.forEach（项=>
{
如果（item.val（）.answer1==this.question_str）
{
this.item_key=item.key；
this.firebase_flag=true；
this.answer1clicks=item.val（）.answer1click；
this.answer2clicks=item.val（）.answer2click；
此.answer1单击++；
}
else if（item.val（）.answer2==this.question_str）
{
this.item_key=item.key；
this.firebase_标志=false；
this.answer1clicks=item.val（）.answer1click；
这是我的回答