使用可观察对象如何映射嵌套的动态对象键？使用角度日历事件

问题描述

我认为使用map 之类的东西可能要好于我目前正在做的事情。希望我能收到一些有关如何使它工作的建议。当前结果是没有事件被映射，因为我的映射不正确，所以路径是错误的。

我的主要问题是bks.fname未定义，因为路径错误。正确的路径是 [“ 05182020”]。Peeter。[-MCcGOMe0FT1IqvlCJkd] .fname

但是我将如何在模型中定义它？

**返回的Json，每个键都是动态的：**


05182020:
   Peteer:
     -MCcGOMe0FT1IqvlCJkd:   //The start of the book model
        date: "05/18/2020"
        name: "Peteer"
        service: "b"
        shop: "Howards"
        time: "10:00 AM"

模型：

export interface Books {
    date?: string;
    fname?: string;
    lname?: string
    name?: string;
    service?: string;
    shop?: string
    time?: string;
}


export interface IDictionary<T> {
    [index:string]: Books;
}

export interface Bookings {
  [index:string]: Books;
}

export interface CalendarEvent<MetaType = any> {
    id?: string | number;
    start: Date;
    end?: Date;
    title: string;
    color?: EventColor;
    actions?: EventAction[];
    allDay?: boolean;
    cssClass?: string;
    resizable?: {
        beforeStart?: boolean;
        afterEnd?: boolean;
    };
    draggable?: boolean;
    Meta?: MetaType;
}

TS 注意：bks.fname和其他名称未定义，因为当前map（（results）=>正在接受根对象，而不仅仅是Books模型。

Calaendar.component.ts

events$: Observable<CalendarEvent<IDictionary<Books>>[]>;

   this.events$ = this.fs.getFullList2(this.shopName)

      .pipe(
        catchError(err => {
          console.log(err)
          return throwError(err);
        }),first(),tap(results =>
          console.log("bookings:",results[0])
        ),map((results) => {
          return results.map((bks: Books) => {
           return {
              title: bks.fname + " " + bks.lname + " ---Time: " + bks.time + ",Service: " + bks.service,start: new Date(bks.date),color: colors.red,allDay: true,Meta: bks,//.time,};
          }
          );
        }
         ));


fireserveice.ts

  getFullList2(shop: string): Observable<any> {

    return this.db.list(shop,ref=>ref.limitToFirst(1)).valueChanges()
  }

解决方法

由于您的问题不清楚，因此很难提供帮助。您期望您的输出看起来像什么？您输入的内容（以一种绕过的方式）是一堆书。该流输出什么？ CalendarEvent或CalendarEvent s的数组？

我在这里最好的猜测是在发现mergeMap时一并输出CalendarEvent。如果您希望输出为CalendarEvent的数组，则需要切换回map()而不是mergeMap()

我还没有测试过，但这是我最好的猜测，

mergeMap(results =>
  results.flatMap(idObj =>
    Object.values(idObj).flatMap(nameObj =>
      Object.values(nameObj).map((book: Books) => ({
        title: book.fname + " " + book.lname + " ---Time: " + book.time,service: book.service,start: new Date(book.date),color: colors.red,allDay: true,meta: book
      }))
    )
  )
)

我希望您可以对此进行一些调整，使其适合您的需求。

一些与您的问题无关的事情，但也许很有趣。

1-此界面：

export interface IDictionary<T> {
    [index:string]: Books;
}

完全没有道理。您根本没有使用泛型，因此我不会将其包括在内。

2-此界面：

export interface Bookings {
  [index:string]: Books;
}

您的问题根本没有使用。

3-您的图书界面描述了一本书。这并不是真正的问题，但是对于一个函数返回Books却只返回一本书来说，这是很奇怪的。例如

getBookById(id: number): Books {
  // some code here
}

返回代表一本书的单个对象，但是方法签名暗示它返回了多本书。

angular angular pipe rxjs rxjs rxjs-observables