关闭应用程序后，Ionic Firebase数据会发生变化

Question

我正在此应用程序中开发一个应用程序，我有很多问题，哪些用户可以回答并显示用户给出的答案百分比，但是当用户回答多个问题并关闭该应用程序时。然后，当用户再次从头开始显示问题时，他们从何处向用户显示问题呢？谢谢

Newp.ts

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


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

  @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>;
  wouldquestion : any;
  ratherquestion : any;

  constructor(public navCtrl: NavController,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');
  }

  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(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().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 | async; let i = index;">
           <!--  <div class="orca">
                                      this is for or round 

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

          <div class="upper" text-center (click)="show(question.ckc)" (click)="clickedButton(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.ckc)" (click)="clickedButton(2,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>

Answer 1

我认为我们可以将用户操作的最后状态存储在本地应用程序存储区或类似位置，并在用户再次打开应用程序时使用它。

Answer 2

您尝试过本地存储吗？尝试使用npm软件包@ ngx-pwa / local-storage。