Ionic2 视图未更新 + 视频

Question

我有以下问题，我的视图没有按应有的方式更新。如果一个玩家做了他的移动触发器工作（我在当前游戏的每个更新上做了一个控制台日志 [1]），但是视图不会定期更新。所以我试图调查这个问题，并在页脚的 Game.html [2] 中添加了一个应该每秒更新的随机数 [3] 检查视图是否正确更新。但它没有，所以每次随机值应该改变时我都会记录控制台..
我的整个 Gamelogic 都在工作，如果我点击一个无效的 Tile，什么也不会发生，如果我点击一个有效的 Tile，Firebase 正在更新，有时两个玩家的视图都在更新。有时一个视图更新，有时 none 更新

本期视频：
你应该看看页脚，并且两个玩家应该对游戏有相同的看法（除了轮到谁和随机页脚编号）

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 用于单人游戏（对战机器人）、多人游戏（一台设备上有 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}}'s turn!</strong><br></div>
  <ion-footer>
    <ion-toolbar>
      <ion-title>Footer{{gameStatus.random}}</ion-title>
    </ion-toolbar>
  </ion-footer>
</ion-content>

[3]游戏状态

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

Ionic2 视图未更新 + 视频

Ionic2 view is not updating + Video

html

ionic2

angular2-template

angular