在Angular中链接RESTful端点调用

如何解决在Angular中链接RESTful端点调用

我在SO上看到了无数的帖子，它们似乎围绕着我要完成的工作而跳舞，但是没有一个达到目标。所以....这是另一篇有关在Angular中链接RESTful端点调用的文章。这是我的简化示例：

给出学生，课程和注册的数据模型：

interface Student {
  id: number;
  studentName: string;
}

interface Course { 
  id: number;
  courseName: string;
}

interface Enrollment {
  studentId: number;
  courseId: number;
}

...并在我的Angular服务中提供以下方法：

getEnrollmentsForStudent(studentId: number): Observable<Enrollment[]> {
   return this.http.get<Enrollment[]>('http://url/enrollment?id='+studentId);
}

我需要编写具有以下签名的第二种方法：

getCoursesForStudent(studentId: number): Observable<Course[]> {
   ...
}

，它使用getEnrollmentsForStudent方法中的Enrollment数组来获取所有相关的Course对象（这里是StackBlitz）。我敢肯定，有一些RxJS运算符的魔术组合可以做到这一点，但是我已经竭尽全力试图解决这个问题。

编辑：这是我的Angular服务的最小可复制示例：

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


interface Student {
  id: number;
  studentName: string;
}

interface Course { 
  id: number;
  courseName: string;
}

interface Enrollment {
  studentId: number;
  courseId: number;
}


@Injectable()
export class RegistrationService {

  constructor(private http: HttpClient) { }

  getEnrollmentsForStudent(studentId: number): Observable<Enrollment[]> {
    return this.http.get<Enrollment[]>('http://url/enrollment?id=studentId');
  }

  getCoursesForStudent(studentId: number): Observable<Course[]> {
    // 1. get Enrollments for student using getEnrollemtnsForStudent
    // 2. for each enrollment,get the course
    // 3. return array of Course objects
    return null;
  }

}

解决方法

您将要使用switchMap。我不知道您获取课程的端点是什么样的，所以我猜测是将ID数组作为查询字符串发送...

您getCoursesForStudent调用getEnrollmentsForStudent方法，并通过switchMap传递其注册数组，并使第二个API调用返回第二个调用的Observable。

https://stackblitz.com/edit/angular-chain-observables-ck6oyt?file=src/app/registration.service.ts

getCoursesForStudent(studentId: number): Observable<Course[]> {
    // 1. get Enrollments for student using getEnrollemtnsForStudent
    // 2. for each enrollment,get the course
    // 3. return array of Course objects
    return this.getEnrollmentsForStudent(studentId).pipe(switchMap(enrollments => {
      const enrollmentIds = enrollments.map(e => e.courseId);
      // Not sure what your API expects to get an array of IDs,just guessing here...
      return this.http.get<Course[]>(`http://url/courses?ids_in=${enrollmentIds}`);
    }));
  }