在 Angular 服务中 HTTP.get 之后从 firebase 返回的重复数组

Question

我在来自 Angular 网络应用中的 Firebase 实时数据库的 HTTP 响应中看到一个重复的数组。

我创建了一个具有以下设置的 firebase 实时数据库：

Firebase data

在我的 Angular 应用程序中，我正在执行 HTTP get 以从 Firebase 检索数据。

fetchEventsAdmin2() {
    return this.http
      .get<bookableEvent[]>(
        'https://ng-smile-for-life-default-rtdb.europe-west1.firebasedatabase.app/events.json'
      )
      .pipe(
        map(bookableEvent => {
          return bookableEvent.map(bookableEvent => {
            return {
              ...bookableEvent,
              BookingDates: bookableEvent.bookingDates ? bookableEvent.bookingDates : []
            };
          });
        }),
        tap(bookableEvent => {
          this.admService.setBookableEvents(bookableEvent);
        })
      )
  }

我调用 setBookableEvents 来填充本地实例。

 setBookableEvents(bkEvent: bookableEvent[]) {
    this.bookableEvents = bkEvent;
    this.bookingChanged.next(this.bookableEvents.slice());
  }

模型如下所示：

import { bookingDates } from "../shared/booking-dates.model";

export class bookableEvent {
    public eventName: string;
    public eventType: string;
    public eventLocation: string;
    public eventImage: string;
    public eventDuration: string;
    public maxAttendees: number;
    public currentAttendence: number;
    public questions: string;
    public eventOnOff: boolean;
    public locationImage: string;
    public descInstr: string;
    public bookingDates: bookingDates[]

    constructor(eName: string, 
                eType: string, 
                eLoc: string, 
                eImage: string, 
                eDuration: string,
                maxAttends: number, 
                currentAttends: number, 
                questions: string,
                eventOnOff: boolean, 
                locImage: string, 
                eDescrInstr: string, 
                bookingDates: bookingDates[])
    {
        this.eventName = eName;
        this.eventType = eType;
        this.eventLocation = eLoc;
        this.eventImage = eImage;
        this.eventDuration = eDuration;
        this.maxAttendees = maxAttends;
        this.currentAttendence = currentAttends;
        this.questions = questions;
        this.eventOnOff = eventOnOff;
        this.locationImage = locImage;
        this.descInstr = eDescrInstr;
        this.bookingDates = bookingDates
    }
}

当我在控制台日志中检查从 Firebase 检索到的响应内容时（见下图），有一个重复的数组，带有一个大写的 BookingDates 数组，我还没有在任何地方声明！这对我来说没有任何意义。这是一个 firebase 或 Angular HTTP 错误，还是我快疯了？非常感谢任何帮助。我可能在做一些愚蠢的事情。谢谢。

Duplicate Array console.log

Answer 1

我将继续假设map 运算符的目的是为bookingDates 分配一个空数组，以防它来自服务器的null。如果是这个原因，那么你可以这样重写它：

fetchEventsAdmin2() {
    return this.http
      .get<bookableEvent[]>(
        'https://ng-smile-for-life-default-rtdb.europe-west1.firebasedatabase.app/events.json'
      )
      .pipe(
        map(bookableEvents => bookableEvents.map(bookableEvent => ({
          ...bookableEvent,
          bookingDates: bookableEvent.bookingDates ?? []
        })
        ),
        tap(bookableEvent => {
          this.admService.setBookableEvents(bookableEvent);
        })
      )
  }

请注意，在您的 sn-p 中，您使用大写字母 B 编写了 BookingDates，我相信这不是预期的行为。

如果您不需要用空数组替换那个空的bookableDates，您可以完全删除map。