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

【问题标题】：How to make an infinite loop on array with ngFor如何使用 ngFor 在数组上进行无限循环
【发布时间】：2018-02-17 14:53:58
【问题描述】：

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

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

编辑：在 HTMl 上，我只取数组的第一个索引来显示它。每次有玩家回答问题时，我都会拼接数组以显示下一个玩家。为了简单起见，ngFor 应该显示（一个接一个）：

托托，图图，蒂蒂，托托，图图，蒂蒂，托托，图图，蒂蒂，......

【问题讨论】：

无限循环是什么意思，是指遍历整个listplayers数组吗？
您确定要进行无限循环吗？您确定您不只是想为每个答案更新事件处理程序回调函数吗？ IE。您可以有一个问题，然后在回调中，您可以将一个新问题呈现为相同的 HTML，以及一个新的回调函数。事件处理程序将模拟一个无限循环，因为事件处理程序永远不会去，除非你命令它这样做。
WillemvanderVeen ：我编辑我的问题以使其清楚。 JO3-W3B-D3V：我不明白你的意思..
让我直截了当地说：您想显示现在轮到的玩家的姓名以及玩家要回答的问题。当他们回答时，您想更新他们的分数并显示一个对话框，说明他们是否正确。然后你想用下一个轮到的玩家的名字和他们要回答的问题来更新视图。对吗？
是的，就是这样！

标签： javascript angular ngfor

【解决方案1】：

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

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

设置在某些刺激下发生的动作
- 回答问题后运行 getAnswer
设置刺激（问题已回答）以通知刺激
- 发出通知问题已回答的事件

AngularJS 提供$broadcast 和$emit Angular 为这些目的提供了EventEmitter Class。

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

【讨论】：