So I’m not sure where the exact problem is.
I’m have a firebase database that displays the live scores of soccer games. When opening my Ionic application it displays and updates fine but after a few updates thought subscribe the view won’t display the ‘game’ object anymore trough *ngFor . Even though the console.log(this.games) still works and subscribe still keeps updating the data in the console. The ‘game’ object won’t return to the screen.
I have been trying everything but I really have no clue were the error in this is located.
The HTML
<ion-list no-margin class="{{ showGameClass }}">
<ion-item class="game" *ngFor="let game of games" text-wrap>
<div class="gameBlock">
<div class="clubLogo">
<img *ngIf="game?.teamThuis.logo" [src]="game?.teamThuis.logo">
</div>
<div class="gameData">
<div class="status">Nu bezig</div>
<div>
<span class="gameResult">
{{ game?.scoreThuis }} - {{ game?.scoreUit }}
</span>
</div>
<div class="time" *ngIf="game?.gameMinute">
{{ game?.gameMinute}}'
</div>
</div>
<div class="clubLogo logoRight">
<img *ngIf="game?.teamUit.logo" [src]="game?.teamUit.logo">
</div>
<div class="goals" *ngIf="game?.events">
<div class="club home">
<ul>
<li *ngFor="let goalHome of goalsHome">{{ goalHome?.speler.achternaam}} {{goalHome?.minuut}}
</li>
</ul>
</div>
<div class="club away">
<ul>
<li *ngFor="let goalAway of goalsAway">{{ goalAway?.speler.achternaam}} {{goalAway?.minuut}}
</li>
</ul>
</div>
</div>
</div>
</ion-item>
</ion-list>
</div>
The TS
import {Component, Inject, forwardRef, OnInit} from '@angular/core';
import {Network} from '@ionic-native/network';
// Providers
import {FirebaseService} from '../../../../providers/firebase.service';
// AngularFire2
import {AngularFireDatabase} from 'angularfire2/database';
// Moment.js
import * as moment from 'moment';
@Component({
selector: 'game-live',
templateUrl: 'game-live.html'
})
export class GameLive implements OnInit {
error: any;
loading: boolean;
games: any[];
goalsHome = [];
goalsAway = [];
showGameClass: string;
constructor(@Inject(forwardRef(() => Games)) private _parent: Games, private firebaseService: FirebaseService, public network: Network, public angularFireDatabase: AngularFireDatabase) {
// Watch for reconnect after disconnect.
this.network.onConnect().subscribe(() => {
this.error = [];
this.ngOnInit();
});
}
/**
* Get data: Live games
*/
ngOnInit() {
this.firebaseService.getData((data) => {
this.firebaseService.gamesObservable.subscribe(result => {
// If 'result' is used then after the visualisation of the 'game' object stops, the console also stops.
// If 'data' is used then after the visualisation of the 'game' object stops, the console continues updating.
this.games = data;
this.processData(data);
});
});
}
/**
* Process the data from FireBase
*/
processData(data) {
// Remove data if not a N.E.C. game or the game is done.
for (let i = 0; i < data.length; i++) {
if (data[i].teamThuis.naamKort != 'NEC' && data[i].teamThuis.naamKort != 'N.E.C.' && data[i].teamUit.naamKort != 'NEC' && data[i].teamUit.naamKort != 'N.E.C.' || data[i].afgelopen == true) {
console.log('remove: ' + data[i].teamThuis.naamKort + ' - ' + data[i].teamUit.naamKort);
// Remove data if not a N.E.C. game or the game is done.
i = this.removeDataRecord(data, i);
// TEST
//console.log('removed: i = ' + i);
}
}
for (let i = 0; i < data.length; i++) {
console.log('1. Run loop ' + moment().format("mm:ss"));
// Do not display if a game hasn't started.
if (data[i].begonnen == false) {
this.showGameClass = 'gameNotVisible';
} else {
this.showGameClass = '';
}
console.log('2. showGameClass: ' + this.showGameClass);
// Calculate game minute
data[i].gameMinute = this.convertPeriod(data[i].periode, data[i].periodeStart.date);
console.log('3. calculated gameMinute');
console.log('4. Are there events?');
// Catch events like goals and sort them in home and away.
if (data[i].events) {
console.log('Events: true');
this.goalsHome = [];
this.goalsAway = [];
for (let key in data[i].events) {
if (data[i].events[key].type == 'Doelpunt') {
if (data[i].events[key].team == data[i].teamThuis.naam) {
this.goalsHome.push(data[i].events[key]);
} else {
this.goalsAway.push(data[i].events[key]);
}
}
}
}
console.log('5. Loop done');
// TEST
//console.log('Live wedstrijd: ' + data[i].teamThuis.naam + ' - ' + data[i].teamUit.naam + ' ' + data[i].datum + ' ' + data[i].tijd);
console.log(this.games);
}
}
/**
* Convert live game period to the playing minute of the soccer game.
*
* Period number translation:
* 1 = Not started
* 2 = 1st Half
* 3 = Halftime
* 4 = 2nd Half
* 5 = 90 mins
* 6 = 1st Extra Time
* 7 = 105 mins
* 8 = 2nd Extra Time
* 9 = 120 mins
* 10 = Penalty Shootout
* 11 = End
*
* @return {number}
*/
convertPeriod(gamePeriod, periodStart) {
let periodGameMinute;
let currentGameMinute;
let now = moment();
if (periodStart != undefined) {
// Convert period number to minutes
switch (gamePeriod) {
case 1:
periodGameMinute = 0;
break;
case 2:
periodGameMinute = 0;
break;
case 3:
periodGameMinute = 45;
break;
case 4:
periodGameMinute = 45;
break;
case 5:
periodGameMinute = 90;
break;
case 6:
periodGameMinute = 90;
break;
case 7:
periodGameMinute = 105;
break;
case 8:
periodGameMinute = 105;
break;
case 9:
periodGameMinute = 120;
break;
case 10:
periodGameMinute = 120;
break;
case 11:
periodGameMinute = 120;
break;
}
return currentGameMinute = periodGameMinute + parseInt(moment.utc(moment(now, "DD/MM/YYYY HH:mm:ss").diff(moment(periodStart))).format("mm"));
} else {
return 0;
}
}
/**
* Remove Data record
* @return {number}
*/
removeDataRecord(data, i: number) {
data.splice(i, 1);
if (data.length == 0) {
return i;
} else {
return i - 1;
}
}
}
The service
import {EventEmitter, Injectable, Output} from '@angular/core';
import {AngularFireDatabase} from 'angularfire2/database';
@Injectable()
export class FirebaseService {
// Output Observable
@Output() gamesObservable: EventEmitter<any> = new EventEmitter();
constructor(private db: AngularFireDatabase) {}
/**
* Get data from FireBase for live games.
*/
getData(onUpdate) {
this.db.list('/sndata/wedstrijden').subscribe((data) => {
onUpdate(data);
this.gamesObservable.emit(data);
});
}
}
