javascript - Visa data från två datakällor i Angular 10 mat-table

Nuvarande konfiguration är Angular 10, med c# asp.net core 3.1 web api

Så, jag försöker använda data från följande två tabeller

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

MÅL: I en Angular-tabell vill jag visa alla kolumner från studentposter förutom HW ID. På den platsen vill jag istället hämta HW_Name som är kopplat till HW_ID. Till exempel skulle jag vilja att detta är resultatet i Angular-tabellen:

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

min .ts:

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

Jag har lyckats hämta alla studentregister och placera dem i en tabell.

Däremot har jag haft svårt att hitta ett bra sätt att få tag på HW_Name och lägga det i tabellen också. Jag har alla mina CRUD-operationer definierade för läxregister. Jag hoppades att jag helt enkelt kunde göra mitt tjänstebegäran till läxregister genom att bara använda HW_id men jag är inte säker på hur jag ska göra det.

Jag kunde få detta att skriva ut de korrekta värdena

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

Detta kunde få mig det korrekt associerade hwRecord-observable. Jag känner att jag är på rätt spår med att använda mergeMap och möjligtvis forkJoin, men jag kan inte hitta ett bra exempel på att detta görs på ett liknande sätt. Jag har försökt göra samma sak på skalan av hela observable-arrayen, men problem fortsatte uppstå.


Mina huvudproblem är att jag inte vet flera saker:

  1. I vilket format behöver dataSource vara för att detta ska fungera?
  2. Kan detta göras lika enkelt som jag tänkte från pipe/mergeMap-metoden?


Förlåt, detta är mycket information. Om någon kunde ge hjälp skulle det uppskattas mycket.

Svar #1

Om du kan ändra din back-end är det bästa sättet att fråga den direkt i din databas via SQL

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

Om du måste göra det i din front-end kan du göra det på det här sättet

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

men var medveten om att du kommer att hämta alla läxregister, även de som inte har en elev kopplad till sig

På detta sätt hämtar du först alla studenter och sedan för varje student hämtar du deras läxor

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