如何使用NGFOR在阵列上制作无限循环



我正在编码一个简单的Angular 4游戏,这是一个测验,玩家必须一一回答。我有一个简单的数组:

this.listPLayers = [{name:'Toto', score:0}, {name:'Tutu',score:0},{name:"Titi',score:O}];

当玩家回答时,我处理此功能:

 getAnswer(answer, player){
      this.nbOfQuestions = this.nbOfQuestions - 1;
      this.listPlayers.splice(0,1);
        if(answer.isTrue == true) {
            player.score = player.score + 1;
            this.showModal(right);
        } else {
            this.showModal(bad);
        }
}

和html:

<span class="player" *ngFor="let player of listPlayers.slice(0, 1)">{{player.name}} : </span>

目标是在列表玩家上进行无限循环,但不会丢失分数。

编辑:在html上,我只采用数组的第一个索引来显示它。每次玩家回答问题时,我都会将数组拼写为显示下一个播放器。为了使其简单,NGFOR应该显示(一个再见一个(:

toto,tutu,titi,toto,tutu,titi,toto,tutu,titi,....

我们没有像我们使用平台代码的方式中在浏览器中编码长时间的运行过程。因此,您对无限循环的想法在服务器过程的上下文中很有意义。

在客户端,我们使用事件系统来实现相同的目标。

  1. 在某些刺激下设立一个行动
    • 问题回答时运行getanswer
  2. 设置刺激(回答问题(以通知刺激
    • 发射事件通知该问题已回答

AngularJS提供$broadcast$emitAngular为这些目的提供了EventEmitter类。

EventEmitter的文档有一个很好的例子,说明如何使用Angular完成此操作。

最新更新