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

【问题标题】：Displaying data from two data sources in angular 10 mat-table在 angular 10 mat-table 中显示来自两个数据源的数据
【发布时间】：2020-08-20 04:22:05
【问题描述】：

当前配置为 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

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

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 observable。我觉得我使用 mergeMap 和可能的 forkJoin 走在正确的轨道上，但我找不到以类似方式完成此操作的好例子。我尝试在整个 observable 数组的规模上做同样的事情，但问题不断出现。

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

dataSource 需要采用什么格式才能使其工作？
这可以像我从 pipe/mergeMap 方法中想象的那样简单吗？

对不起，这是很多信息。如果有人能提供帮助，将不胜感激。

【问题讨论】：

标签： javascript sql angular typescript

【解决方案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));

【讨论】：