Angular中如何通过多次API调用查询数据库的嵌套数据

解决方案 #

1. 修改component.ts代码

首先从RxJS导入必要的操作符：

import { switchMap, forkJoin, map } from 'rxjs';

修改组件内的可观察对象定义和ngOnInit逻辑，直接构造携带完整用户+城市数据的可观察对象：

export class displayComponent implements OnInit {
  // 定义携带完整用户、城市信息的组可观察对象
  groupWithDetails$!: Observable<{
    id: string;
    users: Array<{
      id: string;
      name: string;
      cities: Array<{id: string; name: string}>
    }>
  }>;

  constructor(
    private router: Router,
    private route: ActivatedRoute,
    private groupService: GroupService,
    private userService: UserService,
    private cityService: CityService,
  ) {}

  ngOnInit(): void {
    this.groupWithDetails$ = this.route.params.pipe(
      // 第一步：获取当前组数据
      switchMap((params) => this.groupService.getGroup(params.id)),
      // 第二步：批量拉取组内所有用户数据
      switchMap(group => {
        // 每个用户ID生成一个getUser请求
        const userRequests = group.users.map(userId => 
          this.userService.getUser(userId).pipe(
            // 第三步：批量拉取当前用户对应的所有城市数据
            switchMap(user => {
              const cityRequests = user.city.map(cityId => this.cityService.getCity(cityId));
              // 所有城市请求完成后，组装带城市信息的用户对象
              return forkJoin(cityRequests).pipe(
                map(cities => ({
                  id: user.id,
                  name: user.name,
                  cities: cities
                }))
              )
            })
          )
        );
        // 所有用户请求完成后，组装带完整明细的组对象
        return forkJoin(userRequests).pipe(
          map(users => ({
            id: group.id,
            users: users
          }))
        )
      })
    );
  }
}

2. 修改HTML模板

直接遍历组装好的完整数据渲染即可：

<div *ngIf="groupWithDetails$ | async as group">
  <p> {{ group.id }} </p>
  <!-- 遍历组内用户 -->
  <div *ngFor="let user of group.users">
    <p>用户名：{{ user.name }}</p>
    <p>所属城市：
      <!-- 遍历用户所属城市 -->
      <span *ngFor="let city of user.cities; let isLast = last">
        {{ city.name }}<ng-container *ngIf="!isLast">、</ng-container>
      </span>
    </p>
  </div>
</div>

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