Angular 2 converting to Promise

Question

I want to fetch data from an API which works like a charm but i am struggling with filtering a single Report by a given id from an "Observable".

Here are some snippets:

getAllReports(): Observable<Report[]> {
    return this.http.get(this.reportUrl)
        .map(res => res.json().results);
}

getReports(): void {
    this.reportService.getAllReports()
        .subscribe(
            reports => this.reports = reports,
            error => console.log(error)
        );
}

getSingleReport(id: number): Promise<Report> {
    return this.getAllReports()
        .then(reports => reports.find(report => report.id === id));
        // ^ "Property 'then' does not exist on type 'Observable<Report[]>'"
}

getSingleReport1(id: number): Promise<Report> {
    this.getAllReports()
        .subscribe(
            reports => this.reports = reports,
            error => console.log(error)
        );
    return this.reports.find(report => report.id === id);
    // ^ "Type 'Report' is not assignable to type 'Promise<Report>'"
}

1. getAllReports() is responsible for the communication with the API and returns an Ovserable
2. getReports() inserts the results from the API call in a reports: Report[] aray
3. getSingleReport() should return a Promise<Report> with the given Observable<Report[]>
4. getSingleReport1() is my first try fixing the problem which unfortunately also doesn't work

Of course i know where the problems in 3 & 4 are but in don't know how to solve them.

How can i accomplish a conversation from Report or Observable<Report[]> to Promise<Report>.

Any help is highly appreciated.

Thank you.

Answer 1

Use toPromise operator like this:

getSingleReport(id: number): Promise<Report> {
    return this.getAllReports()
        .subscribe(reports => reports.find(report => report.id === id)).toPromise();
}

Answer 2

So i still didn't find a solution but i came up with a workaround i'll post here. I changed getSingleReport(id: number): Promise<Report> to getSingleReport(id: number): Report.

getSingleReport(id: number): Report {
    this.getAllReports()
        .subscribe(
            reports => this.reports = reports,
            error => console.log(error)
        );
    return this.reports.find(report => report.id === id);
}

This works but is still throwing the error TypeError: Cannot read property 'find' of undefined. I'll probably fix it later today.

UPDATE:

I got it perfectly working now but i decided to do it without a Promise.

report-detail.component.ts:
getReport(id: number) {
    this.reportService.getSingleReport(id)
        .subscribe(
            report => this.report = report,
            error => console.log(error)
        );
}

report.service.ts:
getSingleReport(id: number): Observable<Report> {
    const apiUrl = 'http://localhost:8080/Berichtsprogramm-API/getReport?api_key={TEMPORARY_APIKEY}&id=' + id;
    return this.http.get(apiUrl)
            .map(res => res.json());
}

This works for my case and finally i can be happy again.