View Ionic2 not updating + Video

Question

I have the following problem: my view is not updating, as it should be. If the player made his move, the triggers trigger (I made a console log with each update of the current game [1] ), but the view is not updated regularly. Therefore, I tried to investigate this problem and added a random number in Game.html [2] in the footer, which needs to be updated every second [3] if the check is updated correctly. But this is not so, so I register the console every time a random value should change, which worked.
All my Gamelogic works if I click on an invalid Tile, nothing happens, if I am in a valid Tile Firebase, it is updated, and sometimes both player representations too. Several times, one view is updated, sometimes there are no updates.

Video with this problem:
You should look at the footer and that both players should have the same kind of game (besides the one who does it and the random footer)

https: // youtu .be / Wa-P4tXh6Oo

Gray fields == Valid click field

[1] Check 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);
  });
}

Run code

Game.html Singleplayer (vs Bot), (2 ) (). -. , , , , [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}} 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);

v Game.ts

setTimeout(() => {
  this._applicationRef.tick();
}, 200);

, , .
!

Answer 1

- ,   Angular s. -

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