Question

我正在用nodejs / socketio后端构建一个全栈的聊天游戏应用程序，而我的“候诊室”组件出现了问题，客户在等待每个人加入时都去了游戏，然后由主机启动。如果我加载了该组件，它会正常工作，但是如果我离开并稍后再次加载，则无论出于何种原因，该组件即使正确接收甚至正确更新了模型也不会显示数组数据。我不知道为什么这些数据没有显示，甚至奇怪的是，当我尝试与之交互时，似乎正在删除数据模型。

我发现数据已正确传递，并且模板绑定到的模型应该正确更新。其他模板似乎都没有这种问题。

该模板的脚本：

init(){
    this.hosting = this.client.hostingGame;
    if(this.hosting){
      this.startReadyEnabled = false;
    } else {
      this.ready = false;
      this.startReadyEnabled = true;
    }
    this.client.resetHandlers([this.manager]);
    this.client.socket.emit('query-players', (value)=>{
      let players: Array<Player> = new Array<Player>();
      for(let player of value){
        let p: Player = new Player(player.name, player.id, player.ready);
        players.push(p);
      }
      for(let i=players.length; i<8; i++){
        players.push(Player.emptyPlayer());
      }
      setTimeout(()=>{this.players = players, 100; console.log(this.players);}); //THIS console.log displays the correct data
    });
    this.client.socket.emit('query-gamename', (value)=>this.gamename=value);
    this.client.socket.emit('query-utilname', (value)=>this.utilGamename=value);
    if(this.hosting){
      this.client.socket.emit('query-min-players', num=>this.minPlayers = num);
    }
  }

模板的

html：

<div class="container">
  <table class="table table-hover">
    <tr>
      <th>Player</th><th>Ready</th>
    </tr>
    <tr *ngFor="let player of players">
      <td>{{ player.name }}</td><td>{{ player.formatReady() }}</td>
    </tr>
  </table>
  <button (click)="quit()">{{ hosting ? 'Disband' : 'Quit' }}</button>
  <button (click)="handleReadyButton()"
  [disabled]="!startReadyEnabled">{{ hosting ? 'Start' : ready ? 'Unready' : 'Ready' }}</button>
</div>

所有数据进入并正确分配，但未显示，并且当我尝试进行交互时，players数组变为空数组。

Answer 1

我相信发生在我身上的是角度路由系统中的实际错误，但是我确实找到了解决该问题的方法。我没有在路由器触发导航结束事件时向服务器查询信息，而是将查询功能绑定到组件顶层元素中的mouseenter。这样可以确保直到路由器完成修改/构建模型的全部工作之后，数据才可以交付。

阵列数据在第二次路由至组件

1 个答案: