Ionic 4 вложенных списка баз на основе месяца - PullRequest
Новая
       9

Ionic 4 вложенных списка баз на основе месяца

0 голосов
/ 18 октября 2019

Я пытаюсь составить список событий на основе списка названий месяцев.

Мои данные о базе данных выглядят так:

enter image description here

Вывод, который я пытаюсь получить, выглядит следующим образом:

enter image description here

Как видите, яиметь дату каждого события, введенную вручную. Мне нужно перечислить каждое событие под месяцем, к которому оно относится.

Обновление: Мой подход к кодированию с использованием 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() }))
  )
);


}


}

Я застрял, пытаясьчтобы вытащить события, сгруппированные по месяцам, поэтому моя проблема не в пользовательском интерфейсе, моя проблема может быть машинописной.

Спасибо,

1 Ответ

0 голосов
/ 18 октября 2019

Привет, вам нужно сгруппировать данные, поступающие с базы данных по дате. Затем вы отображаете его в формате html, подобном приведенному ниже коду (хотя я использую ion-item в качестве примера для пользовательского интерфейса):

Предположим, у вас есть данные, сгруппированные по следующей схеме: 

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>
...