Angular 单击REST服务后合并数据角度2

我有一个关于以下“问题”的问题。对于一个新的学生学习进度应用程序，我们想做以下几点：在启动时，你有所有的“课程”（CUxxx）崩溃。您只能看到最终结果（本文后面的json中的eindresultaten） 当用户单击“菜单汉堡”图标时，会显示以下内容： 然后，您将从“Eindresultaten”endresults中看到“Toetsresultaten”（测试结果）

我已建立此服务：

import { Injectable } from '@angular/core';
import { Response, Http } from '@angular/http';
import 'rxjs/Rx';
import { Observable } from 'rxjs/Observable';
import { Studievoortgang, Toetsresultaten, Eindresultaten, Fasen } from '../../classes/Studievoortgang';


@Injectable()
export class StudievoortgangService {

    constructor(private http: Http) { }


    public getStudieplannen(): Observable<any[]> {
        return this.http.get('https://apps.ips.hz.nl/angularstudievoortgang/services/studieplannen/studieplannen.json')
            .map((res: any) => res.json()).catch(() => Observable.of([]));
    }

    public getStudent(): Observable<any> {
        return this.http.get('https://apps.ips.hz.nl/angularstudievoortgang/services/student/student.json')
            .map((res: any) => res.json()).catch(() => Observable.of({}));
    }

    public getStudievoortgangStudent(): Observable<any> {
        return this.getStudent().map((res: any) => res).catch(() => Observable.of([]))
            .flatMap((student: any) => {
             return this.getFasenVanStudieplannen()
                                .map((data: any) => {
                                    let Studievoortgang: any = data;
                                    student.Studievoortgang = Studievoortgang;
                                    return student;
                                });

            });
    }


    public getFasenVanStudieplannen(): Observable<any[]> {
        return this.getStudieplannen().map((res: any) => res)//.catch(() => Observable.of([]))
            .flatMap((studieplannen: any[]) => {
                if (studieplannen.length > 0) {
                    return Observable.forkJoin(
                        studieplannen.map((studieplan: any) => {
                            return this.getFaseVanStudieplan(studieplan.StudieplanID)
                                .map((data: any) => {
                                    let Fasen: any = data;
                                    studieplan.Fasen = Fasen;
                                    return studieplan;
                                });
                        })
                    );
                }
                return Observable.of([]);
            });
    }

    public getFaseVanStudieplan(StudieplanID: string): Observable<any[]> {
        return this.http.get('https://apps.ips.hz.nl/angularstudievoortgang/services/fasen/studieplan' + StudieplanID +'/fasen'+ '.json')
            .map((res: any) => res.json()).catch(() => Observable.of([]))
            .flatMap((fasen: any[]) => {
                if (fasen.length > 0) {
                    return Observable.forkJoin(
                        fasen.map((fase: any) => {
                            return this.getToetsresultatenVanEindresultaten(fase.NaamFase, fase.StudieplanID)
                                .map((data: any) => {
                                    let Eindresultaten: any = data;
                                    fase.Eindresultaten = Eindresultaten;
                                    return fase;
                                });
                        })
                    );
                }
                return Observable.of([]);
            });
    }

    public getToetsresultatenVanEindresultaten(fase: string, StudieplanID: string): Observable<any[]> {
        return this.http.get('https://apps.ips.hz.nl/angularstudievoortgang/services/eindresultaten/studieplan' + StudieplanID + '/eindresultaten' + fase + '.json')
            .map((res: any) => res.json()).catch(() => Observable.of([]))
            .flatMap((eindresultaten: any[]) => {
                if (eindresultaten.length > 0) {
                    return Observable.forkJoin(
                        eindresultaten.map((eindresultaat: any) => {
                            return this.getToetsresultatenVanToetsmatrijs(eindresultaat.Toetsmatrijs)
                                    .map((res: any) => {
                                    let Toetsresultaten: any = res;
                                    eindresultaat.Toetsresultaten = Toetsresultaten;
                                    return eindresultaat;
                                })
                                .catch(() => Observable.of([]))
                        })

                    );

                }
                return Observable.of([]);
            });
    }

    public getToetsresultatenVanToetsmatrijs(toetsmatrijs: string): Observable<any[]> {
        return this.http.get('https://apps.ips.hz.nl/angularstudievoortgang/services/toetsresultaten/' + toetsmatrijs + '.json')
            .map((res: any) => res.json())
            .catch(() => Observable.of([]))
    }
}

}

通过上述服务，我们可以为每个“Eindresultaat”获得所有“Toetsresultaten”。我们真正想要的是只得到“Toetsresultaten”，用户点击相应的“菜单汉堡”。所以我需要一些方法来做到这一点，但我不知道怎么做。（我是个新手）。你们对如何做到这一点有什么建议吗

组成部分：

studievoortgang.component.ts

 import { Component, OnInit} from '@angular/core';

import { StudievoortgangService } from '../../core/services/studievoortgang.service';
import { Studievoortgang } from '../../classes/Studievoortgang';

@Component({
    selector: 'studievoortgang-component',
    templateUrl: 'studievoortgang.component.html'

})

export class StudievoortgangComponent implements OnInit {
    public show = {};
    public ExpCursus: string;
    public studievoortgang: Studievoortgang[];
    public test: Studievoortgang[];
    public studievoortgangStudent: any[];
    public resultaat: string;

    constructor(
        private studievoortgangService: StudievoortgangService

    ) { }

    ngOnInit() {
          this.getStudievoortgangStudent();
    }

   getStudievoortgangStudent() {
        this.studievoortgangService.getStudievoortgangStudent().subscribe(studievoortgangStudent => this.studievoortgangStudent = studievoortgangStudent, error => console.log(error),
            () => console.log('Haal alle studievoortgang data op inclusief toetsresultaten')
        );
    }
    }
}

---

json结果来自于调用服务中的哪个方法？还可以共享您的组件或至少描述您的组件的外观。。。我特别感兴趣的是知道“testresult”是否是作为与“menu humburger”不同的组件实现的……我编辑了这篇文章的开头。只有在我开始时。getstudievoortagangstudent（）；这将从“studievoortgangservice”中触发“getStudievoortgangStudent（）”。我找到了一个解决方案，就是使用一个细节组件来显示带有输入（）的测试结果。听起来不错。干得好json结果来自于调用服务中的哪个方法？还可以共享您的组件或至少描述您的组件的外观。。。我特别感兴趣的是知道“testresult”是否是作为与“menu humburger”不同的组件实现的……我编辑了这篇文章的开头。只有在我开始时。getstudievoortagangstudent（）；这将从“studievoortgangservice”中触发“getStudievoortgangStudent（）”。我找到了一个解决方案，就是使用一个细节组件来显示带有输入（）的测试结果。听起来不错。干得好

 import { Component, OnInit} from '@angular/core';

import { StudievoortgangService } from '../../core/services/studievoortgang.service';
import { Studievoortgang } from '../../classes/Studievoortgang';

@Component({
    selector: 'studievoortgang-component',
    templateUrl: 'studievoortgang.component.html'

})

export class StudievoortgangComponent implements OnInit {
    public show = {};
    public ExpCursus: string;
    public studievoortgang: Studievoortgang[];
    public test: Studievoortgang[];
    public studievoortgangStudent: any[];
    public resultaat: string;

    constructor(
        private studievoortgangService: StudievoortgangService

    ) { }

    ngOnInit() {
          this.getStudievoortgangStudent();
    }

   getStudievoortgangStudent() {
        this.studievoortgangService.getStudievoortgangStudent().subscribe(studievoortgangStudent => this.studievoortgangStudent = studievoortgangStudent, error => console.log(error),
            () => console.log('Haal alle studievoortgang data op inclusief toetsresultaten')
        );
    }
    }
}