Блог

Я вижу дубликат массива в своем ответе от HTTP, полученного из базы данных Firebase в реальном времени в веб-приложении Angular.

Я создал базу данных firebase в реальном времени со следующей настройкой:

Данные базы данных

В моем приложении angular я выполняю HTTP get для извлечения данных из Firebase.

 fetchEventsAdmin2() {  return this.http  .getlt;bookableEvent[]gt;(  'https://ng-smile-for-life-default-rtdb.europe-west1.firebasedatabase.app/events.json'  )  .pipe(  map(bookableEvent =gt; {  return bookableEvent.map(bookableEvent =gt; {  return {  ...bookableEvent,  BookingDates: bookableEvent.bookingDates ? bookableEvent.bookingDates : []  };  });  }),  tap(bookableEvent =gt; {  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 или угловой HTTP, или я схожу с ума? Любая помощь очень ценится. Я, наверное, делаю что-то глупое. Спасибо.

Консоль дублирования массива.журнал

Я продолжу и предположу, что цель map оператора состоит в том, чтобы назначить пустой массив bookingDates на случай, если он поступает null с сервера. Если это причина, то вы могли бы переписать ее так:

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

Обратите внимание, что в своем фрагменте вы написали BookingDates с большой буквы B , и я считаю, что это не было намеренным поведением.

Если вам не нужно заменять этот нуль bookableDates пустым массивом, вы можете удалить map его полностью.