Angular 8基于JSON生成足球对阵匹配代码求助

我来帮你排查并修正这个问题，先梳理下现有代码的问题，再给出能实现足球对阵生成的完整解决方案：

现有代码的核心问题 #

1. 数据类型混乱：你在TS里先把this.group1 = this.teams（赋值了整个组对象），之后又往里面push单个球队名称，导致group1数组混合了对象和字符串，*ngFor循环渲染时必然出错。
2. 缺少对阵生成逻辑：现有代码只是简单收集球队名称，完全没实现你需要的「两两对阵组合」（比如法国vs印度）的核心功能。

修正后的完整实现 #

1. TypeScript 代码（含对阵生成逻辑）

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

// 先修正原数据里的拼写错误：Portugual → Portugal
export const teams: Array<any> = [
  { 
    name: 'A', 
    teams: [ 
      { name: 'France' }, 
      { name: 'Portugal' }, 
      { name: 'India' }, 
      { name: 'China' } 
    ] 
  },
];

@Component({
  selector: 'app-matchups',
  templateUrl: './matchups.component.html',
  styleUrls: ['./matchups.component.css']
})
export class MatchupsComponent implements OnInit {
  // 专门存储生成好的对阵组合
  groupMatchups: Array<string> = [];

  ngOnInit(): void {
    this.generateTeamMatchups();
  }

  // 生成不重复的两两对阵
  generateTeamMatchups(): void {
    // 先把小组里的球队提取成纯名称数组
    const allTeams = teams[0].teams.map(team => team.name);
    
    // 双层循环生成不重复对阵（避免出现法国vs印度、印度vs法国重复情况）
    for (let i = 0; i < allTeams.length; i++) {
      for (let j = i + 1; j < allTeams.length; j++) {
        this.groupMatchups.push(`${allTeams[i]} vs ${allTeams[j]}`);
      }
    }
  }
}

2. HTML 代码（渲染对阵）

<div class="col-3" *ngFor="let matchup of groupMatchups">
  <h5>{{ matchup }}</h5>
</div>

代码说明 #

• 对阵逻辑：通过双层循环，外层从第i个球队开始，内层从i+1开始遍历，确保每一组对阵只生成一次，符合足球小组赛的常规对阵规则。
• 数据处理：用map把球队对象转换成纯名称数组，简化后续的对阵拼接操作。
• 渲染逻辑：直接循环渲染生成好的对阵字符串，避免了原代码中数据类型混乱的问题。

如果需要生成包含主客场的重复对阵（比如法国vs印度和印度vs法国都显示），只需把内层循环的j = i + 1改成j = 0即可。

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