如何在Angular 4中用ngFor实现数组的无限循环

嘿，别用splice啦，这样不仅容易搞乱数组，还完全没必要——咱们用索引取余的方式就能实现无限循环，而且所有玩家的分数都能稳稳保住！下面是具体实现步骤：

1. 组件类（.ts）代码 #

首先定义你的玩家数组，每个玩家带上分数字段，然后维护一个当前玩家的索引就好：

import { Component } from '@angular/core';

@Component({
  selector: 'app-quiz-game',
  templateUrl: './quiz-game.component.html'
})
export class QuizGameComponent {
  // 保存所有玩家的名字和初始分数，数组不会被修改，分数随时更新
  listPlayers = [
    { name: 'Toto', score: 0 },
    { name: 'Tutu', score: 0 },
    { name: 'Titi', score: 0 }
  ];
  
  // 当前显示的玩家索引，初始指向第一个玩家
  currentPlayerIndex = 0;

  // 玩家答题后的处理函数
  onPlayerAnswered(isCorrect: boolean) {
    // 先更新当前玩家的分数（这里假设答对加10分，答错可以根据需求调整）
    if (isCorrect) {
      this.listPlayers[this.currentPlayerIndex].score += 10;
    }

    // 切换到下一个玩家，用取余运算实现无限循环
    this.currentPlayerIndex = (this.currentPlayerIndex + 1) % this.listPlayers.length;
  }
}

2. 模板（.html）代码 #

如果是要每次只显示当前玩家（符合你说的“仅显示数组对应元素”的需求），直接绑定当前索引的玩家数据即可：

<div class="current-player-card">
  <h2>当前答题玩家: {{ listPlayers[currentPlayerIndex].name }}</h2>
  <p>当前分数: {{ listPlayers[currentPlayerIndex].score }}</p>
</div>

<!-- 答题操作按钮示例 -->
<button (click)="onPlayerAnswered(true)">答对</button>
<button (click)="onPlayerAnswered(false)">答错</button>

如果你确实需要用ngFor展示循环的玩家序列（比如显示接下来的轮次顺序），可以基于原数组生成循环序列：

<!-- 显示接下来5轮的玩家顺序示例 -->
<div class="player-sequence">
  <span *ngFor="let i of [0,1,2,3,4]">
    {{ listPlayers[i % listPlayers.length].name }}
    <span *ngIf="i < 4">, </span>
  </span>
</div>

为什么不用splice？ #

因为splice会直接修改原数组，虽然能把第一个元素移到末尾实现循环，但后续要统计总分、查看所有玩家历史分数时，这种修改原数组的方式会徒增麻烦。而用索引取余的方式，原数组始终保持完整，所有玩家的分数数据都不会丢失，逻辑也更清晰！

内容的提问来源于stack exchange，提问作者Nitneq