Ionic2視圖未更新+視頻

Question

我有以下問題，我的視圖不應該像它應該更新。 如果一個玩家完成了他的移動，那么觸發器就會起作用（我在當前游戲的每次更新時都進行了控制台登錄[1] ），但是View並不是經常更新的。 所以我試圖調查這個問題，並在頁腳的Game.html [2]中添加了一個隨機數，應該每秒更新[3] tocheck如果View正確更新。 但它沒有，所以我控制台記錄每次隨機值應該改變有效..
我的整個Gamelogic正在運行，如果我點擊一個無效的Tile沒有任何反應，如果我點擊有效的Tile Firebase正在更新，有時兩個玩家的視圖也是如此..有時一個視圖更新，有時無更新

本期視頻：
您應該看看頁腳，並且兩個玩家應該擁有相同的游戲視圖（除了輪到誰以及隨機頁腳數）

https://youtu.be/Wa-P4tXh6Oo

灰色字段==有效字段單擊

[1] 檢查更新

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

我使用這個Game.html for Singleplayer（vs Bot），Multiplayer（2個玩家在一個設備上）和Multiplayer（Online）。 這個問題恰好發生在在線多人游戲中。 即使數據進入也是正確的，它不會像應該那樣更新視圖
[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); 

我已經嘗試在Game.ts中添加v

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

抱歉我的英語不好，我希望我的問題有點清楚。
周末愉快！

Answer 1

為了觸發變化檢測，需要在Angular的區域內執行。 試試這個-

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