Ionic2 view is not updating + Video - html

Question

i have the following problem, my View isnt updating like it should be. If a player did his move the triggers work (i did a console log on every update of the current game [1]), but the View isnt updating regulary. So i tried to investigate this issue and added in Game.html [2] in the footer a Random number that should be updated every second [3] tocheck if the View is updating correctly. But it didnt, so i console logged every time the random value should change that worked..
My whole Gamelogic is working, if i click on a not valid Tile nothing happens, if i hit on a valid Tile Firebase is updating and sometimes both Players views are aswell.. Some times one view updates, sometimes none updates Video of this issue:
You should take a look at the footer and on that both players should have the same view of the game (besides who's turn it is and the random footer number)
https://youtu.be/Wa-P4tXh6Oo
Grey Field == Valid Field to click on
[1] Checking for Updates
checkForUpdate(key): void {
const query = firebase.database().ref("/games").child(key);
query.on('value', snap => {
console.log("update");
if (!snap.val()) return;
this.updateTurn(snap.val().turn);
this.updatewon_Fields(snap.val().won_fields);
this.updateFields(snap.val().fields);
this.updateNextField(snap.val().nextField);
});
}
I use this Game.html for Singleplayer (vs Bot), Multiplayer (2 Players on one Device) and for Multiplayer (Online). The issue just happens in the Online Multiplayer. Even tho the Data comming in is correct its not updating the view like it should
[2]
Game.html
<ion-content padding>
<ion-grid [ngClass]="getPlayerTurnClass()">
<ion-row *ngFor="let tetrisIndex of index; let r = index; trackBy: trackByFn">
<ion-col *ngFor="let x of tetrisIndex; let x = index; trackBy: trackByFn" [ngClass]="getClassValue(x)">
<div [ngClass]="{'player1_won':gameStatus.won_fields[x]==1,'player2_won':gameStatus.won_fields[x]==2,'bordern':x%2==0,'bordernplus1':x%2!=0}">
<ion-row class="ctr fc tile" *ngFor="let y of index2; let y = index; trackBy: trackByFn">
<ion-col *ngFor="let z of index2; let z = index; trackBy: trackByFn" (click)="playerClick(x,y,z)">
<div class="tile fc">
<span class="ctr tile-text" [ngClass]="{'player1':gameStatus.fields[x][y][z]==1,'player2': gameStatus.fields[x][y][z]==2}">{{(gameStatus.fields[x][y][z]==0)? ' ': ((gameStatus.fields[x][y][z]==1)? 'x' : 'o')}}</span>
</div>
</ion-col>
</ion-row>
</div>
</ion-col>
</ion-row>
</ion-grid>
<div *ngIf="gameService.isGameOver()">
<br>
<button ion-button (click)="btnRestartGame()" full block>Restart Game</button>
<button ion-button (click)="btnReturn()" full block>Return</button>
</div>
<div *ngIf="!gameService.isGameOver()&&gameStatus.gameType&&gameStatus.symbol==gameStatus.turn" class="ctr tile-text"><br><strong>Your turn!</strong><br></div>
<div *ngIf="!gameService.isGameOver()&&gameStatus.gameType!=2" class="ctr tile-text" [ngClass]="{'player1': gameStatus.turn,'player2': !gameStatus.turn}"><br><strong>{{gameStatus.turn? gameStatus.players[0].name : gameStatus.players[1].name}}'s turn!</strong><br></div>
<ion-footer>
<ion-toolbar>
<ion-title>Footer{{gameStatus.random}}</ion-title>
</ion-toolbar>
</ion-footer>
</ion-content>
[3]Gamestatus
setInterval(() => {
this.random = Math.random();
}, 500);
I already tried to add v in Game.ts
setTimeout(() => {
this._applicationRef.tick();
}, 200);
Sorry for my bad english, i hope my question was somewhat clear.Have a great weekend!

Answer 1

In order for something to trigger change detection it needs to be executed
within Angular’s zone.
Try this-
import { NgZone } from '#angular/core';
constructor(public zone: NgZone) {
this.zone.run(() => {
this.updateTurn(snap.val().turn);
this.updatewon_Fields(snap.val().won_fields);
this.updateFields(snap.val().fields);
this.updateNextField(snap.val().nextField);
});
}