Я создаю приложение для викторины с 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.