Firebase makes visualisation of object crash?

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);
        });
    }
}

Here is the console log. I get multiple live soccer games so the ones not needed get deleted first so I only keep the game that is started for the soccer team N.E.C.

After that the loop of updating the game starts which will go fine for a few updates but after a random amount the ‘game’ in *ngFor disappears. While the console.log continues.