Question

我有以下问题，我的视图不应该像它应该更新。如果一个玩家完成了他的移动，那么触发器就会起作用（我在当前游戏的每次更新 [1] 时都会进行控制台登录），但是View不会定期更新。所以我试着调查这个问题，并在页脚中的Game.html [2] 中添加了一个随机数，应该每秒更新 [3] tocheck如果View是正确更新。但它没有，所以我控制台记录每次随机值应该改变有效..
我的整个Gamelogic正在运行，如果我点击一个无效的Tile没有任何反应，如果我点击有效的Tile Firebase正在更新，有时两个玩家的观点也是如此..有时一个视图更新，有时无更新
< br /> 此问题的视频：
您应该看一下页脚，并且两个玩家应该对游戏有相同的看法（除了轮到谁以及随机页脚号）

https://youtu.be/Wa-P4tXh6Oo

灰色字段==有效字段，单击

[1] 检查更新

＆＃13;

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

＆＃13;

我将这个Game.html用于单人游戏（与Bot），多人游戏（一个设备上有2个玩家）和多人游戏（在线）。这个问题恰好发生在在线多人游戏中。即使数据进入也是正确的，它不会像它应该更新视图 [2] 的 Game.html

＆＃13;

<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>

＆＃13;

[3]的 Gamestatus

＆＃13;

setInterval(() => {
  this.random = Math.random();
}, 500);

＆＃13;

我已经尝试在Game.ts中添加v

＆＃13;

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

＆＃13;

抱歉我的英语不好，我希望我的问题有点清楚。
周末愉快！

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视图未更新+视频

1 个答案: