Angular5点击按钮移列表项至另一列表并递减剩余移动次数

嘿，作为Angular新手碰到这个需求很正常，我来一步步帮你搞定！咱们分两部分来实现：先完善TypeScript逻辑，再绑定HTML的点击事件。

首先，咱们先明确球员的数据结构，然后写处理移动的方法。假设你已经有了主力球员数组和替补席数组，每个球员包含剩余移动次数的属性：

// 先定义球员类型，让代码更规范
interface Player {
  id: number;
  name: string;
  remainingMoves: number;
  // 你需要的其他属性，比如位置、号码等
}

export class PlayerComponent {
  // 主力球员数组
  startingPlayers: Player[] = [
    { id: 1, name: 'C罗', remainingMoves: 2 },
    { id: 2, name: '梅西', remainingMoves: 3 }
    // 可以添加更多测试数据
  ];
  // 替补席数组
  benchPlayers: Player[] = [];

  // 点击按钮时执行的方法：移动球员到替补席+减少剩余移动次数
  movePlayerToBench(targetPlayer: Player) {
    // 第一步：减少该球员的剩余移动次数
    targetPlayer.remainingMoves -= 1;

    // 第二步：从主力数组移除球员，添加到替补数组
    const playerIndex = this.startingPlayers.findIndex(player => player.id === targetPlayer.id);
    if (playerIndex !== -1) {
      // splice会移除数组元素并返回被移除的元素，直接push到替补数组即可
      this.benchPlayers.push(this.startingPlayers.splice(playerIndex, 1)[0]);
    }
  }
}

这里用findIndex精准定位要移动的球员，避免因为同名球员出错；splice方法能同时完成“移除”和“获取被移除元素”的操作，很方便。

接下来在你的HTML里，遍历主力球员列表，给每个球员添加按钮，并绑定上面写的方法：

<!-- 主力球员区域 -->
<h3>当前主力阵容</h3>
<div *ngFor="let player of startingPlayers" class="player-item">
  <span>{{ player.name }} | 剩余移动次数: {{ player.remainingMoves }}</span>
  <!-- 给按钮加禁用逻辑：剩余次数<=0时不能点击 -->
  <button 
    (click)="movePlayerToBench(player)"
    [disabled]="player.remainingMoves <= 0"
  >
    移至替补席
  </button>
</div>

<!-- 替补席区域 -->
<h3>替补席</h3>
<div *ngFor="let player of benchPlayers" class="bench-item">
  <span>{{ player.name }} | 剩余移动次数: {{ player.remainingMoves }}</span>
</div>

加[disabled]是为了提升用户体验，避免玩家在没有移动次数时还能点击按钮做无效操作。

• Angular的变更检测会自动帮你更新视图，所以修改球员的remainingMoves或者数组内容后，页面会自动刷新，不用手动处理～
• 如果你的球员数据是从后端API获取的，记得要确保每个球员有唯一的id（或者其他唯一标识），这样findIndex才能精准找到目标球员。
• 如果之后需要实现“从替补席移回主力”的功能，逻辑是反过来的：写一个movePlayerToStarting方法，从benchPlayers移除，添加到startingPlayers即可。

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