javascript - 如何在 Angular 2/4 中从 Promise 中选择唯一元素？

Question

小背景，我有一个 API，它返回一场比赛，其中包含其比赛的链接，并且每场比赛都有一个指向参加比赛的球队的链接。

我现在的目的是根据比赛建立一个排名表，因此，我的第一步是打印一系列比赛中独特“球队”的列表。就是我需要把所有的比赛都看一遍，查看主客场球队，如果没有球队，就插入名单。

这是棘手的部分，我有这样的团队:

match.away = this.teamService.getTeam(match._links.awayTeam.href);
match.home = this.teamService.getTeam(match._links.homeTeam.href);

我的 getTeam() 方法返回一个 promise Team。

getTeam(id: string): Promise<Team> {
    return this.http.get(id)
           .toPromise()
           .then(response => response.json() as Team)
           .catch(this.handleError);
   }

Team 类具有 teamName: string;，这是我需要验证以构建数组的值，这也是我需要帮助的部分。我有一个 OnInit 实现，如下所示:

ngOnInit(): void {
      this.teams = [];
      this.route.params
        .switchMap((params: Params) => this.competitionService.getCompetition(+params['id']))
    .subscribe(competition => {
      this.competitionService.getMatches(competition)
        .then(
          matches => {
            matches.forEach(match => {
              match.away = this.teamService.getTeam(match._links.awayTeam.href);
              match.home = this.teamService.getTeam(match._links.homeTeam.href);
              match.away.then(away => {
                var found = this.teams.find(team => {
                  return team.teamName.toLocaleLowerCase().includes(away.teamName)
                });
                if(!found) {
                  this.teams.push(away);
                }
              });
              match.home.then(home => {
                var found = this.teams.find(team => {
                  return team.teamName.toLocaleLowerCase().includes(home.teamName)
                });
                if(!found) {
                  this.teams.push(home);
                }
              });
            });
            return matches;
          }
        ).then(matches => 
          this.matches = matches
        );
      this.competition = competition
  });
}

我试图做的是首先解决 Promise 并检查团队是否存在于我的数组中，如果找到，则将其推送到列表中。

我的 HTML 看起来像这样:

<md-list>
    <md-list-item *ngFor="let team of teams">
        <button md-raised-button>{{team.teamName}}</button>
    </md-list-item>
</md-list>

但结果是每场比赛中每支球队的列表，因此显然 push 部分正在工作，因为数组 teams: Team[]; 正在填充并且打印正确，但验证不正确。

请不要因为我的代码而杀了我，因为我对此没有任何想法，我只是在即时学习，不仅仅是 Angular，而是编码。

所以我的问题是:

如何根据比赛的 promise 建立一系列独特的球队？

此外，您通常如何拆分数组来进行这些计算？我发现的每一项研究都将我指向一个“自定义管道”，但它似乎只是过滤 View ，在我拥有我的球队阵列后，我必须对每场比赛的进球进行计算，点等，所以它似乎对我不起作用。

有什么想法或建议吗？

Answer 1

我将添加一个新方法来委托(delegate) teams 数组人口:

addToSet(team): void {
    let teamNames: string[] = this.teams.map((team) => team.teamName.toLocaleLowerCase());

    if (teamNames.lastIndexOf(team.teamName.toLocaleLowerCase()) === -1) {
       this.teams.push(team);
    }
}

然后，替换这部分

var found = this.teams.find(team => {
    return team.teamName.toLocaleLowerCase().includes(home.teamName)
});
if(!found) {
    this.teams.push(home);
}

对于

this.addToSet(home);

此外，为了确保在继续加载数组之前两个 Promise 都得到满足，您可以使用 Promise.all 包装两个 getTeam 调用。

Promise.all([
   this.teamService.getTeam(match._links.awayTeam.href),
   this.teamService.getTeam(match._links.homeTeam.href)
]).then((teams) => {
   match.away = teams[0];
   match.home = teams[1];
});

编辑:将它们放在一起

addToSet(team): void {
    let teamNames: string[] = this.teams.map((team) => team.teamName.toLocaleLowerCase());

    if (teamNames.lastIndexOf(team.teamName.toLocaleLowerCase()) === -1) {
       this.teams.push(team);
    }
}

ngOnInit() {
     // rest of the initialization
     matches.forEach(match => {
         Promise.all([
             this.teamService.getTeam(match._links.awayTeam.href),
             this.teamService.getTeam(match._links.homeTeam.href)
         ]).then(teams => {
             match.away = teams[0];
             match.home = teams[1];

             this.addToSet(away);
             this.addToSet(home);
         });
     });
 }

编辑2:在addToSet()中添加toLocaleLowerCase()进行检查。我假设 getTeam 返回单个对象，否则，您需要强制返回的对象架构。