Angular 16：获取 APLI 平台 Hydra 成员，请求中的 api

Question

我想创建一个表格，其中呈现以下数据。 Id、sessionStart 和 SessionEnd 已提取到表中并正确呈现。 我不知道如何获取口径、俱乐部、会员和武器类别。 后端的 API 调用是使用“API Platform”编写的。 这些值似乎正在返回 api 的 url 以获取单独的日期。例如俱乐部：“/api/clubs/1”。这是获取俱乐部的网址。我应该如何以角度编写它，以使其与其余数据同时呈现在材质表中？

这是寄存器列表的api调用（结果如截图所示）

API服务：

getRegister() {
    return this.http.get<Register>(this.baseUrl + 'shooting_registers', this.httpOptions)
    .pipe(
      map((item: any) => {
        return item
      })
    )
  }

组件：

getRegister() {
    this.apiService.getRegister().subscribe((res: any) => {
      this.dataSource.data = res['hydra:member'];
      console.log('register lijst', res['hydra:member'])
    })
  }

API 调用结果：

{
"@context": "/api/contexts/ShootingRegister",
"@id": "/api/shooting_registers",
"@type": "hydra:Collection",
"hydra:totalItems": 1,
"hydra:member": [
    {
        "@id": "/api/shooting_registers/1",
        "@type": "ShootingRegister",
        "id": 1,
        "club": "/api/clubs/1",
        "member": "/api/members/139",
        "sessionStart": "2023-12-22T15:10:47+00:00",
        "sessionEnd": "2023-12-22T15:31:47+00:00",
        "caliber": "/api/calibers/1",
        "weaponCategory": "/api/weapon_categories/1"
    }
]

}

Answer 1

根据我的理解，您需要组合 API 并获取数据，然后最终将它们合并到单个对象中！

鉴于问题中的数据，这是您可能需要的近似值，请调整它以满足您的要求！

genericGet(url: string) {
  return this.http.get<Register>(this.baseUrl + url, this.httpOptions);
}

getRegister() {
  return this.genericGet('shooting_registers')
    .pipe(
      switchMap((res: any) => {
        const data = res['hydra:member'];
        const apiData = data.map((item: any) => forkJoin({
          club: this.genericGet(item.club),
          member: this.genericGet(item.member),
          caliber: this.genericGet(item.caliber),
          weaponCategory: this.genericGet(item.weaponCategory),
          item: of(item),
        }).pipe(
          map(({ club, member, caliber, weaponCategory, item }) => {
            item.club = club;
            item.member = member;
            item.caliber = caliber;
            item.weaponCategory = weaponCategory;
            return item;
          })
        )
        );
        return forkJoin(apiData);
      })
    )
}