Angular HttpClient与Observable解析实体外键，寻求非Observable关联方案

Let's break down the issues in your current implementation and fix them to get a Mother class with a direct Child type property (not an Observable<Child>):

Key Problems in Current Code #

• Broken findOne method: Your ChildService.findOne tries to use array indexing [0] on an Observable, which won't work—Observables don't support direct array access. You need RxJS operators to handle this correctly.
• Redundant API calls: Every time you transform a Mother, you trigger a full getAll() call for children. This is inefficient and will flood your API with duplicate requests.
• Observable child property: Since your API only returns full lists, you can't fetch a single child on-demand to populate a synchronous property. You need to load all data first and map relationships in memory.

Step-by-Step Fix #

1. Fix ChildService with Caching #

First, add caching to avoid repeated API calls and correct the findOne logic:

import { shareReplay, first, map } from 'rxjs/operators';
import { Observable } from 'rxjs';

export class ChildService extends BaseApiService {
  // Cache the children list after the first fetch
  private childrenCache$: Observable<Child[]> | null = null;

  constructor(
    private http: HttpClient,
    private transformer: ChildTransformService,
  ) {
    super(auth);
  }

  public getAll(): Observable<Child[]> {
    if (!this.childrenCache$) {
      this.childrenCache$ = this.http
        .get<ApiChild[]>(this.url, this.options)
        .pipe(
          map(list => list.map(obj => this.transformer.fromApiModel(obj))),
          shareReplay(1) // Cache the result for future subscriptions
        );
    }
    return this.childrenCache$;
  }

  public findOne(id: number): Observable<Child> {
    return this.getAll().pipe(
      map(children => children.find(child => child.id === id)),
      // Ensure we get a valid child, or throw an error
      first(child => !!child, new Error(`Child with ID ${id} not found`))
    );
  }
}

2. Modify MotherService to Load & Map Data in Parallel #

Since we can't fetch individual entities, we'll load all mothers and children at the same time, then map their relationships in memory:

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

export class MotherService extends BaseApiService {
  constructor(
    private http: HttpClient,
    private transformer: MotherTransformerService,
    private childService: ChildService
  ) {
    super(auth);
  }

  public getAll(): Observable<Mother[]> {
    // Fetch both datasets in parallel to reduce load time
    return forkJoin([
      this.http.get<ApiMother[]>(this.url),
      this.childService.getAll()
    ]).pipe(
      map(([apiMothers, children]) => {
        // Create a map for O(1) fast child lookups by ID
        const childById = new Map(children.map(child => [child.id, child]));
        
        // Transform each API mother to app mother, using the map to get the associated child
        return apiMothers.map(apiMother => 
          this.transformer.fromApiModel(apiMother, childById)
        );
      })
    );
  }
}

3. Update Transformer & Mother Class #

Adjust the transformer to use the child map, and update the Mother class to have a synchronous Child property:

// models.ts
export class Mother {
  id: number;
  child: Child; // Now a direct Child type, not Observable<Child>
}

// mother-transformer.service.ts
export class MotherTransformerService {
  fromApiModel(apiModel: ApiMother, childMap: Map<number, Child>): Mother {
    const child = childMap.get(apiModel.child);
    
    if (!child) {
      throw new Error(`Mother ${apiModel.id} references non-existent child ID ${apiModel.child}`);
    }

    return {
      id: apiModel.id,
      child
    };
  }
}

Why This Works #

• Efficient data loading: forkJoin fetches both lists simultaneously, cutting down on overall wait time.
• No redundant API calls: The shareReplay(1) operator caches the children list, so all subsequent requests reuse the cached data instead of hitting the API again.
• Synchronous Child property: Using a Map for child lookups lets us directly assign a Child instance to each Mother without relying on Observables, which matches your desired application model.

If your API ever adds support for fetching individual entities later, you can easily adjust the MotherService to fetch children on-demand—but for now, this approach is the optimal fit for your API constraints.

内容的提问来源于stack exchange，提问作者Michael W. Czechowski