Angular HttpModule 将 json 映射到实体列表答案

【问题标题】：Angular HttpModule map json to entity listAngular HttpModule 将 json 映射到实体列表
【发布时间】：2018-01-18 03:54:17
【问题描述】：

我有一个 Angular 5 应用程序，它从 REST API 检索用户事件数据。见吹角码：

服务

/** GET user events from the server */
  getCalendarEvents(): Observable<UserEvents[]> {
    return this.http.get<UserEvents[]>(this.apiUrl + '/user_events')
    .pipe(
      tap(items => console.log(items)),
      catchError(this.handleError('getEvents', []))
    );
  }

组件

userEventsList: UserEvents[] = [];

getCalendarEvents(): void {
    this.calendarService.getCalendarEvents()
      .subscribe(data => {
        // console.log(data[0].user.FullName);    
        this.userEventsList = data;
      });
  }

UserEvents 接口：

export interface UserEvents {
    user: User;
    bookings: Event[];
}

export interface User{
    Id: string;
    FullName: string;
    Email: string;
}

export interface Event {
    Id: string;
    StartTime: string;
    EndTime: string;
    Description: string;
}

API 响应

[
    {
        "User": {
            "Id": "123abc",
            "FullName": "First Person",
            "Email": "first.person@example.com"
        },
        "Events": [
        {
            "Id": "eventId-1",
            "StartTime": "2018-01-01T00:00:00",
            "EndTime": "2018-01-01T00:00:00",
            "Description": "Event 1"
        },
        {
            "Id": "eventId-2",
            "StartTime": "2019-01-01T00:00:00",
            "EndTime": "2019-01-01T00:00:00",
            "Description": "Event 2"
        }]
    },
    {
        "User": {
            "Id": "user2",
            "FullName": "Second user",
            "Email": "second.user@example.com"
        },
        "Events": []
    },
    .
    .
    .
]

问题是返回的实体 'UserEvents[]' 没有填满。在组件中尝试访问对象user->console.log(data[0].user.FullName)时，产生错误提示不存在。

似乎HttpClient 模块未能正确映射实体。

在httpclient module 的角度指南中解释了如何指定实体类型以返回普通实体。就我而言，它是由其他实体形成的更复杂的实体，也许这就是重点？

我错过了什么吗？我可以自己映射实体吗？

感谢您的帮助:)

【问题讨论】：

UserEvents 接口和api响应的结构不相似。与您在组件中记录订阅箭头函数后发现的 api 响应相同吗？
UserEvents 接口如何才能让角度正确映射 json 数据？
okey 尝试将userEventsList 类型更改为any[] 看看会发生什么
@Ashraful Islam，同样的事情也会发生。整个 json 对象列表直接传回组件，而不是映射到 UserEvents
尝试在 getCalendarEvents() 订阅方法中记录data，看看您是否获得了正确的数据。我认为getCalendarEvents subscribe 方法中的数据不正确

标签： javascript angularjs json angular

【解决方案1】：

getCalendarEvents(): Observable<UserEvents[]> {
    return this.http.get(this.apiUrl + '/user_events')
    .map((result:any=>{  //We transform the response
        return result.map((item: any) => {  //with each element
                        //your item has User and Events
                        //Your UserEvent interface has "user" and "booking"
              return
              {
                   user:item.User,
                   bookings:item.Events
              }
          })
       }).do(result=>
      {
             //just only for check, after remove .do
            console.log(result)
      })
      .catchError(this.handleError('getEvents', []))
    );
  }

看来我们需要两张map，一张用来转换Observable，一张用来转换observable的每个元素

【讨论】：

你完全正确！我实现了您指出的内容，并且运行良好；）谢谢！

【解决方案2】：

我不知道你为什么在 api 响应中使用管道。

尝试使用地图而不是管道

getCalendarEvents(): Observable<UserEvents[]> {
  return this.http.get<UserEvents[]>(this.apiUrl + '/user_events')
    .map(res => res.json()).catch(err => this.handleError());
}

【讨论】：

使用 angular Http 模块而不是使用 HttpClient 模块（我正在使用）时使用您指定的方式。我错了吗？？
当我放 '.map(res => res.json());'显示一个打字稿错误，指示以下内容：“类型'UserEvents'上不存在属性'json'”
你导入地图了吗？ import 'rxjs/add/operator/map';
是的，我做到了。 import 'rxjs/add/operator/map';
尝试从http get方法中删除UserEvents[]类型