http call inside ngFor best practice

Question

I have two models;

export interface Student {
    id: string,
    name: string
}

export interface StudentGoal{
    id: string,
    studentId: string,
    goal: string
}

I get the students in my StudentService like this:

getStudents(): Observable<Student[]> {
    return this.http.get<Student[]>("URL_1");
}

I get a student goal like this:

getStudentGoal(studendId: string): Observable<StudentGoal> {
    return this.http.get<StudenGoal>("URL_2" + studentId);
}

QUESTION

What is the best practice to get student goal inside *ngFor in my student.goal.component

.ts

private subs = new SubSink()
public students: Student[] = [];
constructor(
    private studentService: StudentService
)

ngOnInit() {
    this.getStudents();
}

ngOnDestroy() {
    this.subs.unsubscribe()
}

getStudents(){
    this.subs.sink = this.studentService.getStudents().subscribe((res: Student[]) => {
         this.students = res
    })
}

getStudentGoal(studentId: number){
    BEST PRACTICE ?
}

.html

<div *ngFor="let student of students">
    {{getStudentGoal(student.id).goal}}
</div>

Answer 1

1.- When we mannage Observables we have two differents things: the "response" and the "subscription"

this.subscription=myObservable(res=>{
     this.response=res;
})

this.subscription is a subscription and only is util when we want unsubscribe. it's NOT the response

2.-When we use in .html observables we can

1. show a variable that we are using inside subscribe function

2. use async pipe

   {{response|json}}
   //or
   {{myObservable|async}}
   

but not {{subscription}}

3.-When we mannage a ngFor subscription sometimes is util read all we need. For this we use switchmap and forkJoin

allData=this.studentService.getStudents().pipe(
   switchMap(students:any[]=>{
        return forkJoin(students.map(student=>
              this.studentService.getStudentGoal(student.id).pipe(
                   //return all the properties of student
                   //and all the properties of getStudentGoal
                   //in an unique object
                   map(x=>({...student,...x})
              )
        )
   })
)

So we can use

<div *ngFor="let studentData of allData |async">
{{studentData.id}} {{studetData.goal}}
</div>