Angular 基于月份的Ionic 4嵌套firebase列表

我正在尝试根据月份名称列表列出事件

我的firebase数据如下所示：

我试图达到的输出如下：

如您所见，我手动输入了每个事件的日期。我需要列出每个事件所属的月份

更新： 我使用angularfire2的编码方法如下：

import { Component } from '@angular/core';

import { AngularFireDatabase, AngularFireList} from 'angularfire2/database';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
selector: 'app-tab2',
templateUrl: 'tab2.page.html',
styleUrls: ['tab2.page.scss']
})
export class Tab2Page {

eventsRef: AngularFireList<any>;
events: Observable<any[]>;


constructor(public db: AngularFireDatabase) {

this.eventsRef = db.list('/events');
this.events = this.eventsRef.snapshotChanges().pipe(
  map(changes => 
    changes.map(c => ({ key: c.payload.key, ...c.payload.val() }))
  )
);


}


}

从'@angular/core'导入{Component}；
从“angularfire2/database”导入{AngularFireDatabase，AngularFireList}；
从“rxjs”导入{Observable}；
从“rxjs/operators”导入{map}；
@组成部分({
选择器：“app-tab2”，
templateUrl:'tab2.page.html'，
样式URL:['tab2.page.scss']
})
导出类选项卡2页{
事件ref:AngularFireList；
事件：可观察；
构造函数（公共数据库：AngularFireDatabase）{
this.eventsRef=db.list（'/events'）；
this.events=this.eventsRef.snapshotChanges（）.pipe(
映射（更改=>
map（c=>（{key:c.payload.key，…c.payload.val（）}））
)
);
}
}

我被困在试图拉出按月份分组的事件中，所以我的问题不是UI，我的问题可能是typescript

---

谢谢，

您好，您需要按日期对来自firebase的数据进行分组。然后用html显示它，类似于下面的代码（尽管我使用ion项作为UI的示例）：

假设数据按如下方式分组：

groupedEvents=[{“EventDate”：“2019-10”，“Events”：[{“title”：“Test”，“subtitle”：“testsubtitle”，“date”：“2019-010-18”}]}]
{{group.EventDate}日期：'MMM y'}
{{item.date}日期：'dd MMM y'}
{{item.title}
{{item.subtitle}

Thank you@dom.macs，我的问题不是UI，我想我的问题是如何使用angularfire2从firebase中提取按月份分组的事件。到目前为止，我已经添加了我的方法。我们将不胜感激。