Angular 8 使用 JSON 进行足球比赛答案

【问题标题】：Angular 8 make football match using JSONAngular 8 使用 JSON 进行足球比赛
【发布时间】：2020-04-11 21:08:37
【问题描述】：

我想使用这个 JSON 创建足球比赛：

export const teams: Array<any> = [
  {
    name: 'A',
    teams: [
      {
        name: 'France',
      },
      {
        name: 'Portugual',
      },
      {
        name: 'india',
      },
      {
        name: 'china',
     }
    ]
  },
]

例如，我想匹配法国对印度而不是法国对中国。

所以我使用的是 Angular 8，如果有人可以在该代码中帮助我，我会遇到一些问题。

HTML：

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

打字稿：

this.group1 = this.teams;

this.teams.forEach((item, index) => {
    this.groupList.push(item.name);
    item.teams.forEach((item, index) => {
        this.group1.push(item.name);
    });
});

【问题讨论】：

您到底在寻找什么？
我想为这个小组做足球比赛。比如法国vs印度比中国等等……，我不知道怎么做
在这里，您应该发布您在具体步骤中面临的技术难题。我还不清楚

标签： json angular typescript angular8 ngfor

【解决方案1】：

我相信您想要做的是显示此 JSON 中所有可能匹配项的列表，并且我假设由于团队数组位于它自己的带有名称标签的对象数组中，因此可能存在单独的匹配组您希望显示的内容。

我创建了一个 Stackblitz 项目，您可以查看 here 以查看我对您正在寻找的内容的实现。

我将在下面解释我的代码。

HTML：

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

我不确定 'group1' 和 'groupList' 在您的代码中应该有什么区别，所以我选择了 groupList 作为我的显示值，并使用 'group1' 作为 TS 中的属性。

TS：

for (let teamGroup of this.group1) {
  this.groupList.push("Group: " + teamGroup.name); // show the group
  for (let team1 of teamGroup.teams) {
    for (let team2 of teamGroup.teams) {
      // iterate over every possibility of two teams facing each other
      if (
        this.groupList.indexOf(
          String(team1.name + " vs. " + team2.name)
        ) === -1 &&
        this.groupList.indexOf(
          String(team2.name + " vs. " + team1.name)
        ) === -1
      ) {
        // filter out matchups already pushed to the array
        if (team1.name !== team2.name) {
          // filter out self-matches
          this.groupList.push(team1.name + " vs. " + team2.name);
        }
      }
    }
  }
}

在 Stackblitz 实现中，我使用“团队”作为组件的属性，分配给您提供的 JSON，但您可以动态获取此 JSON 并使用此代码，只需确保将值分配给'group1' 属性。

'groupList' 属性是一个空数组，我们将 .push() 我们希望显示的值。通过在 JSON 的第一个（也是唯一一个）条目中循环遍历“teams”数组，我们可以决定字符串的显示格式（我选择了“Team1 vs. Team2”）并比较两个团队之间所有可能的对决针对“groupList”中的条目的组。如果匹配不存在，我们会将匹配推送到'groupList'。

最终结果是这样的： Results

我希望这就是您想要的。我会先在 cmets 中问一个澄清问题，但我对网站太陌生了，无法做到。

【讨论】：