Ionic 3 Firebase Angular本地存储

Question

我正在创建一个应用。该应用程序显示所有用户的点击百分比。但是当我单击问题时出现问题，它显示下一个问题可以帮助任何人的百分比。我想显示问题用户点击的百分比。有人可以帮助提交项目吗？

newp.ts

import { Component, ViewChild, OnInit } 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 * as firebase from 'firebase';
import { LocalStorage } from '@ngx-pwa/local-storage';


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

  @ViewChild('slides') slides: any;

  hasAnswered: boolean = false;
  score: number = 0;
  stateimage: any;
  slideOptions: any;
  cli: any;
  showclicks: boolean;
  hideMe: any;
  clickvalue1: number;
  clickvalue2: number;
  clickPercentage1: number;
  clickPercentage2: number;
  current_wouldclicks: number;
  current_ratherclicks: number;
  wouldclicks: number = 0;
  ratherclicks: number = 0;
  question_str: any;
  item_key: any;
  firebase_flag: boolean;
  // questions: Observable<any>;
  questions: any[];
  wouldquestion: any;
  ratherquestion: any;

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

    this.clickvalue1 = 0;
    this.clickvalue2 = 0;
    this.clickPercentage1 = 0;
    this.clickPercentage2 = 0;
    this.ratherclicks = 0;
    this.wouldclicks = 0;
    // this.questions = this.afd.list('Questions').valueChanges();       // <=====  Question is coming from there .
    this.cli = "";
    this.showclicks = false;
  }
  ionViewDidLoad() {
    console.log('ionViewDidLoad NewpPage');
  }

  ngOnInit() {
    this.afd.list('Questions').valueChanges()
      .subscribe(
        (qs: any[]) => {
          this.questions = [];
          console.log(qs);
          this.localStorage.getItem<any>('QUESTION')
            .subscribe(
              qsRead => {
                console.log(qsRead);
                if (qsRead) {
                  let index = qs.findIndex(x => x.rather === qsRead);
                  if (qs.length > index + 1) {
                    this.questions = qs.slice(index + 1);
                    console.log(this.questions);
                  }
                } else {
                  this.questions = qs;
                }

              });
        });




  }

  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({
              would: this.wouldquestion,
              rather: this.ratherquestion,
              ratherclick: this.ratherclicks,
              wouldclick: this.wouldclicks
            });
          }
        },
      ]
    });
    alert.present();
  }




  show(quest, index, type, typeText) {
    console.log(quest, index, type, typeText);
    this.localStorage.setItem('QUESTION', quest.rather)
      .subscribe(
        (result) => {
          if (result) {
            this.showclicks = true;
            this.clickedButton(type, typeText);
            setTimeout(() => {
              this.showclicks = false;
            }, 1000);
          }


        });
  }




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

    firebase.database().ref('Questions/').on('value', data => {
      data.forEach(item => {
        if (item.val().would == this.question_str) {
          this.item_key = item.key;
          this.firebase_flag = true;
          this.wouldclicks = item.val().wouldclick;
          this.ratherclicks = item.val().ratherclick;
          this.wouldclicks++;
        }
        else if (item.val().rather == this.question_str) {
          this.item_key = item.key;
          this.firebase_flag = false;
          this.wouldclicks = item.val().wouldclick;
          this.ratherclicks = item.val().ratherclick;
          this.ratherclicks++;
        }
      });
    });

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

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

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

}

newp.html

[![<ion-header color="grey">

  <ion-navbar color="grey" center>
    <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 #slides>
    <ion-slide *ngFor="let question of questions; let i = index;">
      <div class="quizcontainer">

        <div class="upper" text-center (click)="show(question, i, 1, question.would)">
          <p *ngIf="showclicks" style="color: white" item-end class="p1">{{ clickPercentage1 }}% </p>
          <p class="q1" style="text-align: center;">{{question.would}}</p>

        </div>

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


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

      </div>
    </ion-slide>
  </ion-slides>
</ion-content>][1]][1]