javascript - 在 angular 10 mat-table 中显示来自两个数据源的数据

当前配置是 Angular 10，使用 C# ASP.NET Core 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

目标：在一个 Angular 表格中，我想显示学生记录中的所有列，但不包括作业 ID。在该位置，我想获取与作业 ID 相关的作业名称。例如，我希望输出的 Angular 表格如下所示：

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

我的 .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 是正确的方向，但我找不到一个以类似方式实现的好例子。我尝试在整个可观察数组的范围内做同样的事情，但问题不断出现。

我主要的问题是我有几件事情不清楚：

dataSource 需要以什么格式才能工作？
这能像我从 pipe/mergeMap 方法想的那样简单地完成吗？

抱歉信息量有点大。如果有人能提供帮助，将不胜感激。

答案＃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));