JHipster Angular中如何将查询结果作为后续查询的输入参数

1. 现有实现的问题及正确写法 #

你的现有实现存在两处核心问题：

• 错误使用map操作符执行副作用（调用接口并订阅），map的设计作用是对流内数据做转换，不应该处理订阅逻辑
• 嵌套订阅不符合RxJS最佳实践，会提高内存泄漏风险，也难以处理请求异常、取消等场景

正确实现需要使用RxJS的switchMap高阶操作符处理串行依赖的请求，全程只用一次最终订阅即可，示例参考下文。

2. 从data.body提取指定字段的方法 #

你遇到的字段提取报错有两个原因：

• 没有给请求返回值定义明确的TS类型，编辑器无法识别data.body内的字段结构
• courseService.query返回的是学生报名的课程数组，不是单个课程对象，不能直接用data.body.id取单个值，需要遍历数组提取所有课程的id集合

完整实现代码 #

首先先定义和后端返回结构对齐的课程接口：

// 自定义课程接口，字段按需补充
interface ICourse {
  id: number;
  courseName?: string;
  // 其他后端返回的课程字段
}

业务逻辑代码：

import { switchMap } from 'rxjs';
import { HttpResponse } from '@angular/common/http';

// ...类内代码
teachers: ITeacher[];

this.courseService.query({
  'stdId.equals': this.account?.login,
// 指定返回值类型为ICourse数组的响应体，也可以直接在CourseService的query方法定义处指定类型
}) as Observable<HttpResponse<ICourse[]>>.pipe(
  switchMap(data => {
    // 提取所有课程id组成数组，传给下一个查询接口
    const courseIdList = data.body.map(course => course.id);
    return this.teacherService.query({
      'courseId.in': courseIdList
    });
  })
).subscribe((res: HttpResponse<ITeacher[]>) => {
  this.teachers = res.body;
});

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