Ionic Angular Firebase应用程序检索项目

Question

我正在使用Ionic Angular和Firebase构建测验应用程序。我做了一个表格来注册玩家，我把所有东西都放到了我的数据库上（在firebase上）。我设法使玩家资料显示在首页上。现在，我正在尝试将新数据存储到配置文件，测验结果，并且我想在最后一页（摘要页）上显示我为每个玩家生成的随机数，但我无法弄清楚，我只能显示我为所有玩家生成的所有随机数。

我还有以下问题：如何根据测验结果更新玩家数据？在显示结果的测验末尾，如何显示为玩家生成的随机数

Home.ts

    @Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  items = [];
  ref = firebase.database().ref('items/')
  inputText : string = '';
  inputFname: string = '';
  inputYear: string = '';
  inputEmail: string = '';
  inputSpecial: string = '';
  inputJob: string = '';
  myRand: number;


  constructor(public navCtrl: NavController,
              public alertCtrl: AlertController) {

    this.ref.on('value',Response =>{
      this.items = snapshotToArray(Response);
    });
    this.myRand = this.random();
  } 

  addItem(item){
    this.myRand = this.random();
    if( item !== undefined && item !== null ){
      let newItem = this.ref.push()
      newItem.set(item)
      this.inputText = ''
      this.inputFname = ''
      this.inputYear = ''
      this.inputEmail = ''
      this.inputSpecial = ''
      this.inputJob = ''
      this.myRand
      this.navCtrl.push(QuestionPage);
    }
  }
  random(): number{
    var maxV = 10256;
    var minV = 1000;
    let rand = Math.floor(Math.random()*(maxV - minV)) +256;
    return rand

  }
  async delItem(key){
    firebase.database().ref('items/' + key).remove();
  }

  editItem(key){
    let alert = this.alertCtrl.create({
      title: 'Edit Item',
      inputs: [
        {
          name: 'name',
          placeholder: 'Name',
        },
      ],

      buttons: [
        {
          text: 'Cancel',
          role: 'cancel'
        },
        {
          text: 'Edit',
          handler: data => {
            if(data.name !== undefined && data.name.length > 0){
              firebase.database().ref('items/' + key).update({ name: data.name });
            }
            if(data.fname !== undefined && data.fname.length > 0){
              firebase.database().ref('items/' + key).update({ fname: data.fname });
            }
            if(data.year !== undefined && data.year.length > 0){
              firebase.database().ref('items/' + key).update({ year: data.year });
            }
            if(data.email !== undefined && data.email.length > 0){
              firebase.database().ref('items/' + key).update({ email: data.email });
            }
            if(data.specialitate !== undefined && data.specialitate.length > 0){
              firebase.database().ref('items/' + key).update({ specialitate: data.specialitate });
            }
            if(data.job !== undefined && data.job.length > 0){
              firebase.database().ref('items/' + key).update({ job: data.job });
            }
          }
        }
      ]
    });
    alert.present();
  }
}

Home.html

    <ion-header>
  <ion-navbar>
    <ion-title text-center>
      Quiz App
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="master" padding>
  <ion-item>
    <ion-label>Nume</ion-label>
    <ion-input type="text" [(ngModel)]="inputText"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label>Prenume</ion-label>
    <ion-input type="text" [(ngModel)]="inputFname"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label >Anul Nasterii</ion-label>
    <ion-input type="number" [(ngModel)]="inputYear"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label >Email</ion-label>
    <ion-input type="email" [(ngModel)]="inputEmail"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label >Specialitate</ion-label>
    <ion-input type="text" [(ngModel)]="inputSpecial"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label >Loc de munca</ion-label>
    <ion-input type="text" [(ngModel)]="inputJob"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label>I Agree</ion-label>
    <ion-checkbox></ion-checkbox>
  </ion-item>
  <button ion-button block class="start-button" (click)="addItem({name:inputText, fname:inputFname, year:inputYear, email:inputEmail, specialitate:inputSpecial, job:inputJob, random: myRand})" style="background: #20b2aa">Start</button>
  <ion-list>
    <ion-item *ngFor="let item of items" (click)="editItem(item.key)">

      {{ item.name }}
      {{ item.fname }}
      {{ item.year }}
      {{ item.email }}
      {{ item.specialitate }}
      {{ item.job }}
      {{ item.random }}
      <button ion-button style="float:right" color="danger" (click)="delItem(item.key)">Delete</button>
    </ion-item>
  </ion-list>
</ion-content>

Summary.html

<ion-content padding>
  <div class="content">
      <div id="img" class="correctnessImg">
          <img src="../../assets/imgs/thumb.png">
      </div>
      <h1>Multumim pentru Participare</h1>
      <ion-label>Correct answers: {{points}}/{{numOfQuestions}}</ion-label>
      <ion-label>Duration: {{duration}} seconds</ion-label>
      <ion-label>  <ion-item *ngFor="let item of items">Raffle Number: 
        {{item.random}}
      </ion-item></ion-label>
      <h1>Va asteptam la standul nostru in data X la ora Y pentru extragere</h1>
      <button ion-button color="dark" (click)="goHome()">Start Again</button>
      <ion-list>

      </ion-list>
  </div>

Summary.ts

import { Component, OnInit } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import * as firebase from 'firebase';
import { snapshotToArray } from '../../app/environment';
import { QuestionPage } from '../question/question';
import { HomePage} from '../home/home';

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

  items = [];
  ref = firebase.database().ref('items/')
  points: number;
  numOfQuestions: number;
  correctness: number;
  duration: number;
  angle: number;


  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.ref.on('value',Response =>{
      this.items = snapshotToArray(Response);
    });

    this.points = navParams.get('points');
    this.numOfQuestions = navParams.get('numOfQuestions');
    this.correctness = this.points/this.numOfQuestions*100;
    this.duration = navParams.get('duration').toFixed(2);
  }

  ngOnInit() {
    this.angle = 90 - (180 * (this.correctness/100));
  }

  startQuiz() {
    this.navCtrl.push(QuestionPage);
  }
  goHome(){
    this.navCtrl.setRoot(HomePage);
  }
}

我正在使用Ionic3和Angular5。