在可觀察對象中映射子數組時的 RxJS/角度錯誤

Question

這篇文章與我之前發表的一篇文章相關： Angular/RxJS type error when mapping observable

CustomerShipment是一個 model，代表 JSON 響應，還有另一個 class 用於名為CustomerShipmentItems的項目數組。 calendarService.getDailyCalendarShipments(params)正在返回CustomerShipment[] 。 當我嘗試訪問CustomerShipment中的子數組時遇到問題。 每個CustomerShipment都可以包含一個項目數組 ( CustomerShipmentItems[] )。 我想把 map 那個數組項放到返回結果中。 哪個應該是CalendarEvent類型。 但是當我為它做一個單獨的 map 時，再次出現錯誤：

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

我正在嘗試 map 的模式是：

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

基本上，我想將下面的代碼轉換為 RxJS。我也很感激鏈接/參考，這會讓我更好地理解

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

閱讀本文： 高階綜合指南 RxJs 映射運算符：switchMap、mergeMap、concatMap（和 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()
);

Answer 2

你能試試這個方法嗎

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