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

Question

我在 Angular 网络应用程序中从 Firebase 实时数据库获取的 HTTP 响应中看到重复数组。

我已经使用以下设置创建了一个 firebase 实时数据库：

Firebase data

在我的 angular 应用程序中，我正在执行 HTTP 获取以从 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);
        })
      )
  }

请注意，在您的代码段中，您用大写字母 B 编写了 BookingDates，我认为这不是预期的行为。

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

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

Duplicate array being returned from firebase after HTTP.get in Angular service

http-get

firebase-realtime-database

angular