在角度为10的表格中显示来自两个数据源的数据

Question

当前配置为Angular 10，带有c#asp.net核心3.1 web api

因此，我试图使用以下两个表中的数据

Student Records                    Homework Records
id  |  Name    |  HW ID            id  |  HW_Name
=======================            ==========================
1   |  Bob     |  7        AND     7   |  Addition_practice_1
2   |  Bob     |  10               10  |  Addition_practice_2

目标：在有角度的表格中，我想显示学生记录中除HW ID之外的所有列。在那个位置，我想获取与HW_ID关联的HW_Name。例如，我希望这是输出角度表：

Student   |   HW Name
==================================
Bob       |   Addition_practice_1
Bob       |   Addition_practice_2

my.ts:

ngOnInit(): void {
this.studentRecordService.getStudentRecordsByName(this.studentName).subscribe((data: any[]) => {
this.dataSource.data = data;
this.dataSource.sort = this.sort;
});

我已经能够成功地提取所有的学生记录并将它们放在桌子上

然而，我一直在努力寻找一种好方法来获取HW_Name并将其放入表中。我已经为家庭作业记录定义了所有CRUD操作。我希望我可以简单地使用HW_id向家庭作业记录进行服务调用，但我不知道如何做到这一点

我能够得到这个打印出正确的值

var hw_name;
var student_obs = this.studentService.getStudentByStudentId("fbf81537-b656-40d7-640f-08d8358ce483")
var hw_obs = student_obs.pipe(mergeMap((student: Student) => this.hwRecordService.gethwRecordDetailsById(student.hw_id)));
hw_obs.subscribe((v : Hw_Record) => {
hw_name = v.name; 
console.log(bot_name);
});

这能够让我获得正确关联的hwRecord可观察结果。我觉得我使用mergeMap和可能的forkJoin是正确的，但我找不到一个以类似方式实现这一点的好例子。我曾尝试在整个可观测阵列的尺度上做同样的事情，但问题不断出现。

我的主要问题是我不知道几件事：

1. 数据源需要采用什么格式才能工作
2. 这能像我在pipe/mergeMap方法中想的那样简单吗

很抱歉，这是很多信息。如果有人能提供帮助，我们将不胜感激。

Answer 1

如果您可以更改后端，最好的方法是通过SQL 直接在数据库中查询

SELECT Students.Name, Homeworks.Name
FROM Students
INNER JOIN Homeworks ON Students.HW_ID=Homeworks.ID;

如果你必须在你的前端做它，你可以这样做

forkJoin([this.getAllStudents(), this.getAllHomeworks()]).subscribe(
([students, homework]) => {
this.result = students.map((student) => ({
name: student.name,
homework: homework.find((h) => h.id === student.homework_id).name,
}));
}
);

但要注意，你会获取所有的家庭作业记录，即使是那些没有学生与之相关的

通过这种方式，你将首先获取所有学生，然后为每个学生获取其家庭作业

this.getAllStudents()
.pipe(
switchMap((students) =>
forkJoin(
students.map((s) =>
getHomeworkById(s.homework_id).pipe(
map((homework) => ({
name: s.name,
homework: homework.name,
}))
)
)
)
)
)
.subscribe((result) => (this.result = result));