如何正确处理这个 Angular 对 return 对象数组的承诺？

Question

我是 Angular 的新手，我发现了以下问题。

进入服务class我有这个：

import { Injectable } from '@angular/core';
import { HttpClientModule, HttpClient } from '@angular/common/http'

@Injectable()
export class EventService {
    constructor(private http: HttpClient) {}

    getEvents() {
        return this.http.get('assets/json_mock/calendarevents.json')
                    .toPromise()
                    .then(res => JSON.parse(JSON.stringify(res)).data)
                    .then(res => console.log(res))
                    .then(res => { return res })
    }
}

因此 getEvents() 方法通过 get() 方法在我的服务器上执行对 URL 的调用并通过 **toPromise() 方法将此可观察对象转换为承诺。

然后我将我的响应结果转换为一个 JSON 对象，并将此 JSON 的 data 字段放入 res.

将它打印到控制台中，这是我所期望的，这是输出：

(3) [{…}, {…}, {…}]
0: {id: 1, title: "All Day Event", start: "2017-02-01"}
1: {id: 2, title: "Long Event", start: "2017-02-07", end: "2017-02-10"}
2: {id: 3, title: "Repeating Event", start: "2017-02-09T16:00:00"}
length: 3
__proto__: Array(0)

最后我 return 这条线：

.then(res => { return res })

好的，在我的 Angular 组件中，我必须使用这些数据，在这里我发现了一些问题。我试图通过这条线来做到这一点：

this.eventService.getEvents().then(events => { this.events = events;});

但是 IDE 给我以下错误信息：

Type 'void' is not assignable to type 'any[]'.ts(2322)

试图编译我得到一个类似的错误：

ERROR in src/app/fullcalendar/fullcalendar.component.ts:22:52 - error TS2322: Type 'void' is not assignable to type 'any[]'.

22     this.eventService.getEvents().then(events => { this.events = events;});
                                                      ~~~~~~~~~~~

为什么我收到这个错误？究竟是什么意思？我该如何修复它？

我认为我的服务方法是 return 一个包含 JSON 的承诺，但这也可能是错误的，因为我的组件 class 需要一个包含 JSON 对象。该数组以这种方式在组件代码中声明（我无法更改它，因为它被 PrimeNG 日历使用）：

events: any[];

我该如何解决这个问题？

Answer 1

您登录到控制台时没有 return 值。所以从那里开始的价值是 void.

然后您将此空值分配给 this.events。显然这应该是一个数组（ any[] ）。所以这就是消息告诉你的错误。

// should assign a typescript return type to the method to detect the error earlier
getEvents(): Promise<any[]> { 
    return this.http.get('assets/json_mock/calendarevents.json')
      .toPromise()
      .then(res => JSON.parse(JSON.stringify(res)).data)
      .then(res => {
        console.log(res);
        // you returned no value here!
        return res;
      })
}

如何正确处理这个 Angular 对 return 对象数组的承诺？

How to correctly handle this Angular promise to return an array of object?

angular-promise

angular

angular-httpclient