Ionic2的觀點並沒有更新+視頻

Question

我有以下問題，就像我的心不是查看更新應該的。如果球員做了他的舉動觸發器的工作（我做了控制檯日誌當前的遊戲[1]的每次更新），但心不是查看更新regulary。所以我試圖探討這個問題，並在頁腳Game.html [2]補充說，如果要查看是否正確更新每秒[3] tocheck更新的隨機數。但它沒有，所以我安慰記錄每一次的隨機值應該改變工作..
我的整個Gamelogic工作，如果我在一個無效的瓷磚沒有點擊發生，如果我打一個有效的瓷磚火力地堡被更新，有時雙方球員意見是藏漢..有些時候，一個視圖更新，有時沒有更新

視頻這個問題的：
你應該看看頁腳和對雙方球員應具備的遊戲相同的觀點（除誰的把它和隨機數頁腳）

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爲單人（VS博特），多人（一個設備上有兩名玩家）和多人（在線）。這個問題只發生在在線多人遊戲中。甚至壽在正在添加數據是正確其不更新視圖像它應該
[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

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

對不起我的英文不好加V，我希望我的問題有點不清楚。
週末愉快！

Answer 1

爲了什麼觸發它需要被角的區域內執行 變化檢測。 試試這個 -

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