View isnt updating + Video


#1

Hello Guys,
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)

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!