Processing nested data model in angular

Question

I am trying to display member's education and work experience using Angular. The code i tried is here: i am getting neither error nor displaying the data. i am sure that i am lost but i hope someone out there will help me.

Thanks for you help.

 <tr *ngFor="let member of members">
                  <td>{{ member.firstName }}</td>
                  <td>{{ member.lastName }}</td>
                  <td>{{ member.gender?.genderName }}</td>
                  <td>{{ member.description }}</td>
    </tr>
  <tr *ngFor="let edu of member.educations">
                  <td> {{edu?.schoolName}} </td>
                  <td>Studiespesialisering</td>
                  <td>{{ edu?.startDate | date }}</td>
                  <td> {{ edu?.endDate | date }}  </td>
  </tr>

export class Member {
    id:number;
    firstName: string;
    lastName: string;
    email:string;
    gender: Gender;
    interests: Interest; 
    workexperiences: Work [];
    educations: Education[]; 
}

export class Education{
  educationsId?: number;
  schoolName: string;
  studyCity: string;
  degreeId: number;
  startDate: string;
  endDate: string;
}

export class Work {
  workExperiencesId?:number;
  jobTitle: string;
  companyName: string;
  industry: Industry;
}

Answer 1

Not sure if this is what you want since your code is super incomplete but here you go:

https://stackblitz.com/edit/angular-ivy-ekfp7n?file=src/app/app.component.ts

Got some version of the code running so you can see it as an example.

EDIT: Updated the blitz with the header. This is something that I came up quickly and would not super performatic, because I do 1 for for each cell in the education side. Maybe using an accordion or something for the education part would be better