Angular服务调用HTTP GET从Firebase返回重复数组问题排查

问题根因 #

大写首字母的BookingDates字段是你代码中手动新增的，既不是Firebase的问题也不是Angular HTTP的bug。
你在fetchEventsAdmin2的map操作逻辑里，先通过展开运算符...bookableEvent保留了Firebase返回的所有原始字段（包含小写首字母的bookingDates），又主动新增了一个大写首字母的BookingDates字段，最终就会出现两个名字仅大小写不同的重复数组。

修复方案 #

把map中新增字段的名称改成和你的bookableEvent模型定义一致的小写首字母bookingDates即可，同时建议修改重名的函数参数避免逻辑歧义，修改后代码如下：

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

补充说明 #

你给http.get添加的<bookableEvent[]>泛型仅为TypeScript编译阶段的类型提示，不会对运行时的返回数据做校验，你补充的bookingDates默认空数组的逻辑是合理的，仅字段名大小写错误导致了重复字段问题。

内容的提问来源于stack exchange，提问作者John Lynagh