Angular 16：如何获取API Platform Hydra关联数据并渲染到Material表格

针对API Platform返回的关联字段为资源URL的场景，提供三种可行的实现方案，按推荐优先级排序：

方案1：利用API Platform的expand参数一次性内嵌关联数据（最优） #

API Platform支持通过expand查询参数，直接将关联资源内嵌到主请求结果中，无需额外发起HTTP请求，大幅减少请求次数。

修改API Service代码 #

// API SERVICE
getRegister() {
  // 新增expand参数，指定需要内嵌的关联字段
  const params = new HttpParams().set('expand', 'club,member,caliber,weaponCategory');
  return this.http.get<any>(this.baseUrl + 'shooting_registers', { ...this.httpOptions, params });
}

后端返回结果示例 #

此时API会直接返回内嵌的关联实体数据：

{
  "hydra:member": [
    {
      "id": 1,
      "club": {
        "@id": "/api/clubs/1",
        "name": "XX射击俱乐部"
        // 俱乐部其他字段
      },
      "member": {
        "@id": "/api/members/139",
        "name": "张三"
        // 会员其他字段
      },
      // 其他主数据字段...
    }
  ]
}

Component与模板代码 #

Component代码无需大幅修改，直接使用内嵌数据渲染表格：

// COMPONENT
getRegister() {
  this.apiService.getRegister().subscribe((res: any) => {
    this.dataSource.data = res['hydra:member'];
  });
}

表格模板中直接访问关联字段的属性：

<ng-container matColumnDef="club">
  <th mat-header-cell *matHeaderCellDef> 俱乐部 </th>
  <td mat-cell *matCellDef="let element"> {{ element.club?.name }} </td>
</ng-container>

<ng-container matColumnDef="member">
  <th mat-header-cell *matHeaderCellDef> 会员 </th>
  <td mat-cell *matCellDef="let element"> {{ element.member?.name }} </td>
</ng-container>

注意：需确保后端API Platform实体配置中，允许这些关联字段被expand（可通过实体类的@ApiResource或@ApiProperty注解配置）

方案2：用RxJS的forkJoin批量处理关联请求（优雅处理多请求） #

如果无法使用expand参数，推荐用forkJoin批量处理每个条目的关联请求，避免嵌套订阅的回调地狱。

API Service新增通用方法 #

// API SERVICE
getRegister() {
  return this.http.get<any>(this.baseUrl + 'shooting_registers', this.httpOptions);
}

// 通用获取关联实体的方法
getRelatedEntity(url: string) {
  return this.http.get<any>(url, this.httpOptions);
}

Component代码修改 #

// COMPONENT
import { forkJoin } from 'rxjs';
import { map } from 'rxjs/operators';

getRegister() {
  this.apiService.getRegister().subscribe((res: any) => {
    const registerList = res['hydra:member'];
    
    // 为每个注册条目创建包含所有关联请求的Observable
    const processedRegisters$ = registerList.map((register: any) => {
      return forkJoin({
        club: this.apiService.getRelatedEntity(register.club),
        member: this.apiService.getRelatedEntity(register.member),
        caliber: this.apiService.getRelatedEntity(register.caliber),
        weaponCategory: this.apiService.getRelatedEntity(register.weaponCategory)
      }).pipe(
        map(relatedData => ({ ...register, ...relatedData }))
      );
    });

    // 批量订阅并更新数据源
    forkJoin(processedRegisters$).subscribe(mergedData => {
      this.dataSource.data = mergedData;
    });
  });
}

模板代码同方案1，直接使用element.club?.name即可。

方案3：基础嵌套请求（适合小数据量场景） #

对于数据量极小的场景，可直接在主数据请求后，逐个发起关联请求并合并数据。

Component代码修改 #

// COMPONENT
getRegister() {
  this.apiService.getRegister().subscribe((res: any) => {
    const registerList = res['hydra:member'];
    
    registerList.forEach((register: any) => {
      // 请求俱乐部数据
      this.apiService.getRelatedEntity(register.club).subscribe(club => register.club = club);
      // 请求会员数据
      this.apiService.getRelatedEntity(register.member).subscribe(member => register.member = member);
      // 请求口径数据
      this.apiService.getRelatedEntity(register.caliber).subscribe(caliber => register.caliber = caliber);
      // 请求武器分类数据
      this.apiService.getRelatedEntity(register.weaponCategory).subscribe(category => register.weaponCategory = category);
    });

    this.dataSource.data = registerList;
  });
}

模板代码同方案1。

通用注意事项 #

• 使用?.可选链操作符，避免数据未加载完成时出现undefined报错
• 若表格数据量大，优先选择方案1，减少HTTP请求开销
• 方案2符合RxJS最佳实践，避免嵌套订阅导致的代码混乱

内容的提问来源于stack exchange，提问作者Lotte Beelen