Question

我刚开始使用Angular 6。

我完成了Hero教程，然后将其替换为真正的本地API

现在，我没有英雄，而是参加比赛

但我的API不是返回一系列锦标赛，而是将其包装到数据对象中，因此我可以添加元数据。

tournament.service.ts

getTournaments(): Observable<Tournament[]> {
    this.messageService.add('TournamentService: fetched tournaments');
    return this.http.get<Tournament[]>(this.tournamentsUrl)
      .pipe(
        tap(tournaments => this.log(`fetched tournaments`)),
        catchError(this.handleError('getTournaments', []))
      );
  }

tournament.ts

export class Tournament {
  id: number;
  user: string;
  date: string;
  name: string;
  numCompetitors: number;
}

我从API获得的锦标赛：

"data": [
{
"id": 1,
"user": "superuser@dev.com",
"date": "2018-06-13",
"name": "Fake Tournoi",
"numCompetitors": 86
},
{
"id": 2,
"user": "federation@dev.com",
"date": "2018-06-06",
"name": "Noel Kerluke",
"numCompetitors": 0
},
]

如何始终从数据中提取数组？

Answer 1

如果锦标赛是一个对象，那么，在您订阅服务方法的组件中，您必须获得这样的数据数组，如tournaments["data"]

getTournaments(): void {
    this.tournamentService.getTournaments()
    .subscribe(tournaments => this.tournaments= tournaments["data"]);
  }

Answer 2

你可以这样做：

1 创建锦标赛阵列
2 在get方法选项中添加 {observe：'response'} 3 而不是使用地图使用订阅方法获取响应正文，如下所示代码

完整解决方案：

private tournament : Tournament[];

getTournaments(): Observable<Tournament[]> {

    this.messageService.add('TournamentService: fetched tournaments');

    return this.http.get<Tournament[]>(this.tournamentsUrl,{observe: 'response'})
      .subscribe(response => {this.tournament = response.body}),
        catchError(this.handleError('getTournaments', []))
      );
  }

您的所有锦标赛数据都会被提取到您的锦标赛阵列中，您可以随意使用

Answer 3

通常，我会根据DDD原则从DTO写一个映射器到模型类。在你的情况下，它会像

export class TournamentMapper implements DtoMapper {
    map(resp: TournamentResponse): Tournament {
        return new Tournament(resp.Id, resp.User, resp.Date, resp.Name, resp.numCompetitors);
    }
}

在你的HTTP Get中，我会添加一个map（）来将DTO数组转换为Tournament模型的数组。

return this.http.get<Tournament[]>(this.tournamentsUrl).pipe(
   tap(tournaments => this.log(`fetched tournaments`)),
   catchError(this.handleError('getTournaments', [])).
   map((resp: Array<TournamentResponse>) => {
       const tournaments: Array<Tournament> = [];
       resp.forEach(tournament => tournaments.push(this.tournamentMapper.map(tournament)));
       return tournaments;
   })
);

如何从角度中解析json中的数据对象

3 个答案: