Angular 5嵌套请求问题求助：人员关联数据API调用困扰

Hey there, fellow Angular newbie! 😊 I totally get how tricky nested API requests can feel when you’re just starting out—been there, done that. Let’s break down how to handle your specific scenario step by step.

First, we’ll wrap our API calls in a service to keep things clean and reusable. This is Angular’s best practice for handling data requests.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';

// Define TypeScript interfaces to enforce data structure (super helpful for autocompletion!)
interface Person {
  id: number;
  name?: string;
  age?: string;
  father?: Person;
  childrens?: Person[];
}

@Injectable({ providedIn: 'root' })
export class PeopleService {
  private baseApiUrl = 'api/v1/people';

  constructor(private http: HttpClient) {}

  // Fetch single person data
  getPerson(personId: number): Observable<Person> {
    return this.http.get<Person>(`${this.baseApiUrl}/${personId}`);
  }

  // Fetch nested related people for a given person
  getRelatedPeople(personId: number): Observable<{ id: number; father?: Person; childrens?: Person[] }> {
    return this.http.get<{ id: number; father?: Person; childrens?: Person[] }>(`${this.baseApiUrl}/${personId}/related`);
  }
}

Don’t forget to import HttpClientModule in your root module (like AppModule)—otherwise the HttpClient won’t work!

Next, we’ll write component logic to first fetch the main person, then their related data, and recursively fill in details for all nested family members (since your related endpoint only returns IDs for nested entries). We’ll use RxJS operators (mergeMap, forkJoin) to manage asynchronous requests smoothly.

import { Component, OnInit } from '@angular/core';
import { PeopleService, Person } from './people.service';
import { forkJoin, map, mergeMap } from 'rxjs';

@Component({
  selector: 'app-person-details',
  template: `
    <div *ngIf="fullPerson" class="person-card">
      <h2>{{ fullPerson.name }} (Age: {{ fullPerson.age }})</h2>
      
      <div *ngIf="fullPerson.father" class="relation-section">
        <h3>Father:</h3>
        <p>{{ fullPerson.father.name }} (Age: {{ fullPerson.father.age }})</p>
      </div>

      <div class="relation-section" *ngIf="fullPerson.childrens?.length">
        <h3>Children & Grandchildren:</h3>
        <app-family-tree [people]="fullPerson.childrens"></app-family-tree>
      </div>
    </div>
  `,
  styles: [`
    .person-card { padding: 1rem; max-width: 600px; margin: 2rem auto; }
    .relation-section { margin-top: 1rem; padding-left: 1rem; border-left: 2px solid #eee; }
  `]
})
export class PersonDetailsComponent implements OnInit {
  fullPerson: Person | null = null;

  constructor(private peopleService: PeopleService) {}

  ngOnInit(): void {
    const targetPersonId = 1; // Replace with dynamic ID if needed
    this.fetchCompletePersonData(targetPersonId);
  }

  private fetchCompletePersonData(personId: number): void {
    // First get the main person's details
    this.peopleService.getPerson(personId)
      .pipe(
        // Then fetch their related family data
        mergeMap(mainPerson => 
          this.peopleService.getRelatedPeople(personId)
            .pipe(
              // Merge main person data with related data
              map(relatedData => ({
                ...mainPerson,
                father: relatedData.father,
                childrens: relatedData.childrens
              })),
              // Recursively fetch details for all nested family members
              mergeMap(partialPerson => this.populateNestedDetails(partialPerson))
            )
        )
      )
      .subscribe(completeData => {
        this.fullPerson = completeData;
      });
  }

  // Recursive function to fill in details for nested father/children
  private populateNestedDetails(person: Person): Observable<Person> {
    // Fetch father's details if we only have an ID
    const fatherRequest = person.father 
      ? this.peopleService.getPerson(person.father.id) 
      : of(null);

    // Fetch details for each child, and recursively process their children too
    const childrenRequests = person.childrens?.length 
      ? forkJoin(person.childrens.map(child => this.populateNestedDetails(child)))
      : of([]);

    // Wait for all requests to finish, then merge the data
    return forkJoin([fatherRequest, childrenRequests]).pipe(
      map(([fatherDetails, childrenDetails]) => ({
        ...person,
        father: fatherDetails || person.father,
        childrens: childrenDetails.length ? childrenDetails : person.childrens
      }))
    );
  }
}

To show the hierarchical family tree cleanly, create a small nested component that renders itself recursively for child nodes:

import { Component, Input } from '@angular/core';
import { Person } from './people.service';

@Component({
  selector: 'app-family-tree',
  template: `
    <ul>
      <li *ngFor="let member of people">
        <div>{{ member.name }} (Age: {{ member.age }})</div>
        <!-- Recursively render grandchildren -->
        <app-family-tree *ngIf="member.childrens?.length" [people]="member.childrens"></app-family-tree>
      </li>
    </ul>
  `,
  styles: [`
    ul { list-style-type: circle; padding-left: 1.5rem; margin: 0.5rem 0; }
  `]
})
export class FamilyTreeComponent {
  @Input() people: Person[] = [];
}

• Always use TypeScript interfaces for your data—it catches typos early and makes your code easier to maintain.
• RxJS operators like mergeMap (for sequential requests) and forkJoin (for parallel requests) are your best friends for handling async data in Angular.
• Don’t forget to unsubscribe from observables to avoid memory leaks! For simplicity, I used a basic subscribe here, but in production, consider using async pipe in the template (which auto-unsubscribes) or takeUntil.

Hope this helps you wrap your head around nested API requests in Angular! Feel free to tweak the code to match your exact UI or data needs—flexibility is part of the fun once you get the hang of it.

内容的提问来源于stack exchange，提问作者David Santos Gonçalves