Question

我想使用以下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>

TypeScript：

this.group1 = this.teams;

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

Answer 1

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

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

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

HTML：

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

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

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实现中，我将'teams'作为组件的属性，分配给您提供的JSON，但是您可以动态获取此JSON并使用此代码，只需确保将值分配给“ group1”属性。

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

最终结果是这样的： Results

我希望这就是您想要的。我本来会在评论中先问一个澄清的问题，但是我对网站来说太陌生了。

Angular 8使用JSON进行足球比赛

1 个答案: