RxJS/Angular 在 observables 中映射子数组时出错

Question

这个 post 与我之前制作的 post 有关：

CustomerShipment 是一个表示 JSON 响应的模型，还有另一个 class 用于名为 CustomerShipmentItems 的项目数组。 calendarService.getDailyCalendarShipments(params) 正在 returning CustomerShipment[]。当我尝试访问 CustomerShipment 内的子数组时遇到问题。每个 CustomerShipment 可以包含一个项目数组 (CustomerShipmentItems[])。我想将该项目数组映射到 return 结果中。应该是 CalendarEvent 类型。但是当我为它做一个单独的地图时，再次出现错误：

events$: Observable<CalendarEvent[]>;

this.events$ = this.calendarService.getDailyCalendarShipments(params).pipe(
 mergeMap((results, index) => {
   return from(results);
 }),
 map((result: CustomerShipment, index) => {
   result.items.map((e, i) => {
      return {
         title: result.customer,
         start: new Date(Date.parse(e.appointmentTime)),
         meta: {
           header: this.headers[index]
         }
      };
   });
 }), toArray()
);

我尝试映射的模式是：

{
    "0": {
        "customerId": 1234,
        "customer": "test",
        "items": [
           id: 123,
           tssNumber: "1234567"
           containerNumber: "ISO Container Standard",
           appointmentTime: "24/03/2022 12:00 p.m."
        ]
    }
}

基本上，我想将下面的代码转换成 RxJS。我也很感激 links/references 这会让我更好地理解

this.calendarService.getDailyCalendarShipments(params).pipe(
  map((result: CustomerShipment[]) => result.forEach((e, index) => {
    if (this.headers.length !== result.length) {
      this.headers.push({
        id: e.customerId,
        name: e.customer,
        color: colors[index]
      });
    }
    e.items.forEach((item) => {
      if (!this.events.some(el => el.id === item.id)) {
        const itemDate = new Date((Date.parse(item.appointmentTime)));
        this.events.push({
          id: item.id,
          title: item.containerNumber + ' ' + item.appointmentTime,
          color: this.headers[index].color,
          start: itemDate,
          meta: {
                header: this.headers[index]
          },
          actions: this.actions,
          allDay: itemDate.getHours() === 0 || itemDate.getHours() === 1
        });
      }
    });
})))

预期响应将是以下字段的数组：

{
id: 123,
title: "etc",
start: Date Fri Mar 18 2022 01:00:00 GMT+0100 (Central European Standard Time),
allDay: true,
color: undefined
}, // etc
```

Answer 1

你可以这样试试吗

this.events$ = this.calendarService.getDailyCalendarShipments(params).pipe(
    mergeMap((results, index) => {
      return from(results).pipe(map((result: CustomerShipment, index) => {
        result.items.map((e, i) => {
           return {
              title: result.customer,
              start: new Date(Date.parse(e.appointmentTime)),
              meta: {
                header: this.headers[index]
              }
           };
        });
        return result;
      }));
    }),
    
   );

Answer 2

读这个：Comprehensive Guide to Higher-Order RxJs Mapping Operators: switchMap, mergeMap, concatMap (and exhaustMap)

let events$: Observable < CalendarEvent[] > ;

this.events$ = this.calendarService.getDailyCalendarShipments(params)
.pipe(
    mergeMap((results: CustomerShipment[]) => from(results)),
    mergeMap((result: CustomerShipment) => from(result.items)),
    map((item, index) => {
        const itemDate = new Date((Date.parse(item.appointmentTime)));
        return {
            id: item.id,
            title: item.containerNumber + ' ' + item.appointmentTime,
            start: itemDate,
            allDay: itemDate.getHours() === 0 || itemDate.getHours() === 1,
            color: undefined
        };
    }),
    toArray()
);

RxJS/Angular 在 observables 中映射子数组时出错

RxJS/Angular error when mapping sub-array in observables

arrays

rxjs

angular