http在最佳实践中呼叫

Question

我有两个型号；

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

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

我让我们的学生服务的学生这样：

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

我得到了这样的学生目标：

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

问题

最佳实践是什么，最佳实践在我的学生中获得 *ngfor的学生目标。 。成分

.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.-当我们掌控可观察到时，我们有两个不同的东西事物：“响应”和“订阅”

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

this.subscription是一种订阅，只有在我们想要取消订阅时才util。这不是响应

2.-当我们在.html可观察物中使用时，我们可以

1. 显示一个我们在subscribe函数中使用的变量

2. 使用async pipe

     {{{worlds | json}}}
   //或者
   {{myobservable | async}}}
    

但不是 {{sisscription}}

3.-当我们掌握ngfor订阅时，有时会读取我们所需的一切。为此，我们使用switchmap和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})
              )
        )
   })
)

以便我们可以使用

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