Angularのサービスを使って、イベントデータをFirebaseから取得したい。

前提・実現したいこと

ionic + firebaseでカレンダーアプリを制作しています。
カレンダーはionic2-calendarを使っています。
追加したイベントをfirebaseのCloud Firestoreから読み込むのは、こちらを参考にうまくいきました。

しかし、各日にちのページ（下の動画を参照）でイベントの削除や更新といった事を考えると、こちらのコードの様にサービスでデータを取得した方が良いのでは？と思い、挑戦しています。

ここに質問の内容を詳しく書いてください。
home.service.tsには

発生している問題・エラーメッセージ

home.page.ts

import { AuthService } from './../auth/auth.service';
import { AngularFirestore } from '@angular/fire/firestore';
import { HomeService, DayEvent } from './home.service';
import { Component, OnInit } from '@angular/core';
import { NavController } from '@ionic/angular';
import { Router } from '@angular/router';
import { EventData } from './home.model';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
  eventSource = [];
  viewTitle;
  calendar = {
    mode: 'month',
    currentDate: new Date(),
    locale: 'ja-JP'
  };

  //private events: Observable<DayEvent[]>;

  constructor(
    private navCtrl: NavController,
    private router: Router,
    private homeService: HomeService,
    private db: AngularFirestore
  ) {
    this.db.collection(`events`).snapshotChanges().subscribe(colSnap => {
      this.eventSource = [];
      colSnap.forEach(snap => {
       const event: any = snap.payload.doc.data();
       event.id = snap.payload.doc.id;
       event.startTime = event.startTime.toDate();
       event.endTime = event.endTime.toDate();
       this.eventSource.push(event);
        });
      });
    }

//getEventsはhome.service.tsから呼ばれた
  ngOnInit() {
    // this.events = this.homeService.getEvents();
  }

  onViewTitleChanged(title) {
    this.viewTitle = title;
  }



  onEventSelected(event) {
    console.log('Event selected:' + event.startTime + '-' + event.endTime + ',' + event.title);
  }

  onTimeSelected(ev) {
    const selected = new Date(ev.selectedTime);
    this.homeService.selectedDate = selected;
  }

  reloadSource(ev) {
    console.log('range changed: startTime: ' + ev.startTime + ', endTime: ' + ev.endTime);
  }


  today() {
    this.calendar.currentDate = new Date();
  }

  dayPage() {
    this.router.navigateByUrl('/day');
  }

}

home.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
import { map, take } from 'rxjs/operators';

export interface DayEvent {
  id?: string;
  title: string;
  startTime: Date;
  endTime: Date;
  allDay: boolean;
}

@Injectable({
  providedIn: 'root'
})
export class HomeService {
  private dayCollection: AngularFirestoreCollection<DayEvent>;
  private dayEvents: Observable<DayEvent[]>;
  private colEvents;
  

  eventSource = [];
  selectedDate = new Date();

  constructor(
    private afs: AngularFirestore
  )
  {
    this.dayCollection = this.afs.collection(`events`);
    this.colEvents =  this.dayCollection.snapshotChanges().subscribe(colSnap => {
      this.eventSource = [];
      colSnap.forEach(snap => {
        const event: any = snap.payload.doc.data();
        event.id = snap.payload.doc.id;
        event.startTime = event.startTime.toDate();
        event.endTime = event.endTime.toDate();
       //イベントはログに出るが、画面に反映されない。
        console.log(event);
        return this.eventSource.push(event);
      });
    });





  }

//これをhome.page.tsで呼ぶ
  getEvents(): Observable<DayEvent[]> {
    return this.colEvents;
  }


  addNewEvent() {
    const start = this.selectedDate;
    const end = this.selectedDate;
    end.setMinutes(end.getMinutes() + 60);

    const event = {
       title: 'Event #' + start.getMinutes(),
       startTime: start,
       endTime: end,
       allDay: true
    };
    console.log('イベント登録' + start);
     //this.db.collection(`users/${this.authService.userId}/events`);
    return this.afs.collection(`events`).add(event);
  }

  onEventSelected(event) {
    return console.log('イベント選ばれた:' + event.startTime + '-' + event.endTime + ',' + event.title);
  }

  onTimeSelected(ev) {
    return console.log(ev.selectedTime + ', hasEvents: ' +
      (ev.events !== undefined && ev.events.length !== 0) + ', disabled: ' + ev.disabled);
  }

 
  reloadSource(ev) {
    return console.log('range changed: startTime: ' + ev.startTime + ', endTime: ' + ev.endTime);
  }





}

home.service.tsには、どのようにコードを書けば良いでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

ionicや使用されているライブラリについて知見はありませんが、Angularの観点で回答します。

home.service.tsには、どのようにコードを書けば良いでしょうか？

メソッド内でsnapshotChangesを次のように処理してObservable<DayEvent[]>を返してあげれば良いと思うのですがいかがでしょう。

Javascript
1export class HomeService {
2  constructor(private afs: AngularFirestore) {}
3
4  getEvents(): Observable<DayEvent[]> {
5    return this.afs.collection<DayEvent>('events').snapshotChanges().map((actions) => {
6        return actions.map((action) => {
7            const data = action.payload.doc.data() as DayEvent;
8            const id = action.payload.doc.id;
9
10            return { id, ...data };
11        });
12    });
13  }
14}

そしてそれをngOnInitで呼び出してみてください。

Javascript
1export class HomePage implements OnInit {
2  events: Observable<DayEvent[]>;
3
4  constructor(
5    private navCtrl: NavController,
6    private router: Router,
7    private homeService: HomeService
8  ) {}
9
10  ngOnInit() {
11    this.events = this.homeService.getEvents();
12  }
13}