Angular 2转换为Promise

时间:2017-07-12 09:09:03

标签: angular typescript type-conversion angular-promise angular2-observables

我想从API中获取数据,其功能类似于魅力,但我正在努力过滤来自" Observable"的给定ID的单个报告。

以下是一些片段:

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()负责与API的通信 并返回一个Ovserable
  2. getReports()reports: Report[] aray
  3. 中插入API调用的结果
  4. getSingleReport()应返回带有Promise<Report>
  5. Observable<Report[]>
  6. getSingleReport1()是我第一次尝试解决这个问题,遗憾的是也没有用
  7. 当然我知道3&amp; 4但不知道如何解决它们。

    如何完成从ReportObservable<Report[]>Promise<Report>的对话。

    非常感谢任何帮助。

    谢谢。

2 个答案:

答案 0 :(得分:0)

像这样使用toPromise运算符:

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

答案 1 :(得分:0)

所以我仍然没有找到解决方案,但我想出了一个解决方法,我会在这里发布。 我将getSingleReport(id: number): Promise<Report>更改为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);
}

这样可行,但仍然会抛出错误TypeError: Cannot read property 'find' of undefined。 我今天晚些时候可能会修复它。

<强>更新

我现在完成了它的工作,但我决定在没有承诺的情况下完成它。

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());
}

这适用于我的情况,最后我可以再次开心。