在 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;
  }

}

Angular 打字稿 RXJS

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}`);
    }));
  }

在 Angular 中链接 RESTful 端点调用

Chaining RESTful endpoint invocations in Angular

评论

评论