时间戳

首页 > 解决方案 > Angular - 如何将 httpClient.request() 收到的对象映射到 Angular 中的接口

angular - Angular - 如何将 httpClient.request() 收到的对象映射到 Angular 中的接口

问题描述

我有一个从后端部分的方法收到的对象，我用它调用httpClient.request()

this.httpClient.request<YearlyOverview[]>('get', `${this.configService.get('serverMethodsUrl')}api/ServerMethods/getPresencesByEmployeeIdAndYear`, {
    withCredentials: true,
    params: new HttpParams().set('userId', '292')
                            .set('year', '2019')
  }).subscribe((result: any) => {
            myArray = result;
  });

返回的对象如下所示：

myArray: 
  [
    {
    id: 1,
    name: "Mike",
    presences: [
                    {
                        month: 1,
                        current: 50,
                        total: 170,
                        days: [
                                {day: 1, total: 8.5},
                                {day: 2, total: 8.5},
                                {day: 3, total: 8.5},
                                {day: 4, total: 8.5},
                                .............
                            ]
                    }
                ]
    }
  ]

所以基本上，有 3 个嵌套数组。

只是为了给您一个想法，它显示了选定员工每天的所有工作时间。

同时我的界面略有不同，最大的不同是第三个数组不存在，它"days"包含一个数组"presences"：

export interface YearlyOverview {
  id: number;
  name: string;
  presences: Array<YearlyPresence>;
}

export interface YearlyPresence {
  month: number;
  current: number;
  total: number;
  day1: number;
  day2: number;
  day3: number;
  day4: number;
  day5: number;
  day6: number;
  day7: number;
  ...and so on up to day31
}

现在我正在尝试将从 HttpClient 收到的对象映射到我的接口，但我需要一些帮助。谁能指出我正确的方向？

我想映射到我的界面的“day1”，即那一天的“total”值。

谢谢

标签： angular

解决方案

我不测试它，但类似的东西

this.httpClient.request<YearlyOverview[]>('get', `${this.configService.get('serverMethodsUrl')}api/ServerMethods/getPresencesByEmployeeIdAndYear`, {
    withCredentials: true,
    params: new HttpParams().set('userId', '292')
        .set('year', '2019')
}).pipe(
    map(values => values.map(year => {
        year.presences = year.presences.map(presence => {
            presence.days.forEach(day => presence['day' + day.day] = day.total)
        })
    }))
    )
    .subscribe((result: YearlyOverview[]) => {
        myArray = result;
    });

推荐阅读