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

Question

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

我的 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() }))
  )
);


}


}

我被困在试图提取按月分组的事件，所以我的问题不是 UI，我的问题可能是打字稿。

谢谢，

Answer 1

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

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

groupedEvents = [{"EventDate": "2019-10","Events": [{"title": "Test","subtitle": "testsubtitle", "date": "2019-010-18"}]}]

<ion-item-group *ngFor="let group of groupedEvents">
  <ion-item-divider>{{group.EventDate|date:'MMM y'}}</ion-item-divider>
  <ion-item  *ngFor="let item of group.Events">
    <p>{{item.date|date:'dd MMM y'}}
    <h3>{{item.title}}</h3>
    <p>{{item.subtitle}}</p>
  </ion-item>
</ion-item-group>