如何使用ngFor在数组上进行无限循环

时间:2018-02-17 14:53:58

标签: javascript angular ngfor

我正在编写一个简单的角度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>

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

编辑: 在HTMl上我只是取数组的第一个索引来显示它。每当玩家回答问题时,我会拼接数组以显示下一个玩家。 为了简单起见,ngFor应该显示(一个一个):

Toto,Tutu,Titi,Toto,Tutu,Titi,Toto,Tutu,Titi,....

1 个答案:

答案 0 :(得分:0)

我们不会像使用平台代码那样在浏览器中对长时间运行的进程进行编码。因此,您对无限循环的思考在服务器进程的上下文中是有意义的。

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

  1. 设置一些刺激措施
    • 在回答问题时运行getAnswer
  2. 设置刺激(问题回答)以通知刺激
    • 发出通知已回答问题的事件
  3. AngularJS提供$broadcast$emit 和Angular为这些目的提供了EventEmitter Class

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