常連

## テーマ、知りたいこと
今後 rxjs って多く使われたりするのでしょうか？
今まであまり使ったことがなかったのですが使用する機会があり、便利に感じた上、フレームワーク自体は結構昔からあるものではある割に今まで使っていなかったので気になり質問させていただきました。
ざっくりした質問のため個人の主観による感想でも良いのですが、この辺りの技術トレンドってどんな感じなのでしょうか？

## 背景、状況

firestore の更新に対してrxjs(rxfire) を用いてobserveするという様な仕組みのシステムに関わっています。

firestoreの更新があるたび一度 subscribe すればリアクティブにデータを扱える点に便利さを感じたのですが、そこまで多く普及して今後も使われ続ける様なものではないのですかね？？このような実装をする場合代替でもっと良いものがあったりするのでしょうか？

また、この辺りは firestore 側の話なのでご存知であればという感じですが、内部的な仕組みについて、これはfirestoreに対して定期的にリクエストを送り変更を検知している or firestore 側から変更の通知が送られるのをリッスンしている のどちらなんですかね？前者であればこちらからのリクエスト数の増加によりクラウド利用のコストが上がったりが懸念される気もしたのですが、そんな事にもなっていない様なのでだとすれば後者なのですかね？

firestore と rxjs(rxfire) でデータの変更をウォッチする事が特にコストも変わらずできるのであれば結構便利でもっと普及しそうなものですが、実際どうなのでしょうか？



Rxjs ( + firestore ) のトレンドについてご存知の方教えてください

以下のようなサービスを作成してデータを取得しているのですが
このサービスをcomponentで呼んでthis.testDataを返したいのですが
普通に呼ぶとundifinedが返ってきてしまいます
非同期なのが影響していると思うのですがいいやり方はないでしょうか


```ここに言語を入力
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { GetApiReturnService } from './get-api-return.service';
import * as xml2js from 'xml2js';

@Injectable({
  providedIn: 'root'
})
export class TestService {

  url: string;

  testData;

  constructor(private http: HttpClient, private getApiReturnService: GetApiReturnService) { }

  searchTest(){
    this.url = 'https://test.jp/api?type=1';

    let testData;
    this.getApiReturnService.search(this.url).subscribe(response => {
      xml2js.parseString(response, function (err, result) {
        testData = result;
      });
      this.testData = testData;
    });

    
    return this.testData;

  }
}
```

Angular6 RxJsのsubscribeのデータをreturnで返したい

http通信にてjsonファイルの読み込みができず、ご教示いただければ幸いです。
モジュールの読み込みをしてHTTP通信用にサービスを追加。コンポーネントで呼び出してコンソールログ表示させるだけなのですが、なぜがファイルが見つからない。
ファイルパスを散々変えてはやっていますが、解決にいたらず。
以上、よろしくお願いします。

○コンソールのエラー内容
![![エラー画面](2678a722406b7f10cf12b7a387ec4875.png)](9eef47d4e77643c1e6e1b671b742a2c1.png)

参考の写経先は
[https://www.youtube.com/watch?v=8UOKgXr2I30&t=323s](https://www.youtube.com/watch?v=8UOKgXr2I30&t=323s)

○ファイル構造
```tree
├── app
│   ├── app.component.css
│   ├── app.component.html
│   ├── app.component.spec.ts
│   ├── app.component.ts
│   ├── app.module.ts
│   └── my-data.service.ts
├── assets
├── data
│   └── student.json
├── environments
│   ├── environment.prod.ts
│   └── environment.ts
├── favicon.ico
├── index.html
├── main.ts
├── polyfills.ts
├── styles.css
├── test.ts
├── tsconfig.app.json
├── tsconfig.spec.json
└── typings.d.ts

```
app.module.ts
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import {HttpModule} from '@angular/http';
import {MyDataService} from './my-data.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, HttpModule
  ],
  providers: [MyDataService],
  bootstrap: [AppComponent]
})
export class AppModule { }
```
app.component.ts
```typescript
import {Component, OnInit} from '@angular/core';
import {MyDataService} from './my-data.service';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';


  constructor(private newService: MyDataService) {
  }

  ngOnInit() {

    this.newService.fetchData()

  }
}
```

my-data.service.ts
```typescript
import {Injectable} from '@angular/core';
import {Http} from '@angular/http';

@Injectable()
export class MyDataService {
  private url = './src/data/student.json';

  constructor(private http: Http) {
  }

  fetchData() {
    this.http.get(this.url).subscribe(
      (data) => console.log(data)
    )
  }


}
```

angularにて内部jsonファイルの読み込みについて

【実現したいこと】
・Angularの勉強をしているものです。
・signupに成功した後、非同期通信を使って「login表記」を「logout表記」に変更したいです。

---

【現状のエラー】
・子コンポーネントからserviceを経由して、親コンポーネントの表記を変更できる構造を想定してます。

・子コンポーネントで、serviceにある 'subject' に 'next()' を使って値を代入し、
親コンポーネントにある 'subscribe' で購読して表記を変更しようと思っているのですが、購読できていない状況です。
（※親コンポーネント内の'subscribe'内にもうけた 'console.log' が値を表示してくれない）

もし、お分かりになる方がおられましたら、ご教示頂きたいと存じます。

---
【Angularのバージョン】
```ここに言語を入力
・Angular CLI: 9.1.9
・Node: 12.18.1
・OS: darwin x64
```

---
【Packageのバージョン】
```ここに言語を入力
@angular-devkit/architect         0.901.9
@angular-devkit/build-angular     0.901.9
@angular-devkit/build-optimizer   0.901.9
@angular-devkit/build-webpack     0.901.9
@angular-devkit/core              9.1.9
@angular-devkit/schematics        9.1.9
@angular/cdk                      9.2.4
@angular/cli                      9.1.9
@angular/material                 9.2.4
@ngtools/webpack                  9.1.9
@schematics/angular               9.1.9
@schematics/update                0.901.9
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0
```
---
【コンポーネントの構造】
```ここに言語を入力
app.component.ts
 |
 |--- user.component.ts
   |
   |--- signup.component.ts

```
---
【コード】

app.component.ts
```ここに言語を入力
import { Component, OnInit, ChangeDetectorRef, ChangeDetectorRef } from '@angular/core';
import { AuthService } from '../shared/service/auth.service';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent implements OnInit {

  private _isLogined: boolean = false;
  private onDestroy$ = new Subject();

  constructor(readonly auth: AuthService,
              private changeDetector: ChangeDetectorRef) { }

  get isLogined(): boolean {
    return this._isLogined;
  }

  set isLogined(status: boolean) {
    this._isLogined = status;
  }

  ngOnInit(): void {
    this.auth.isLogined$
      .pipe(takeUntil(this.onDestroy$))
      .subscribe(status => {
　　　　　console.log(status);
        this.isLogined = status;
　　　　　this.changeDetector.markForCheck();
      });
  }

  ngOnDestroy() {
    this.onDestroy$.next();
  }
}

```


AuthService.ts
```ここに言語を入力
import { Injectable } from '@angular/core';
import { Subject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  constructor() { }
  
  public _isLogined = new Subject<boolean>();

  get isLogined$(): Observable<boolean> {
    return this._isLogined.asObservable();
  }

  set isLogined(status: boolean) {
    this._isLogined.next(status);
  }
}
```
signup.component.ts
```ここに言語を入力
import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { Router } from '@angular/router';
import { AccountService } from '../../../shared/api/account.service';
import { AuthService } from '../../../shared/service/auth.service';

@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.scss']
})
export class SignupComponent implements OnInit {

  constructor(private account: AccountService,
              private auth: AuthService,
              private router: Router) { }

public onSubmit(userInput: string): void {
    this.account.signup(userInput)
      .subscribe(_ => {
        this.auth.isLogined = true;
        this.router.navigate(['/']);
      },error => {
        console.log(error);
      });
  }
}
```
・userがサインアップの情報を入力し終わると、signup.component の 'onSubmitメソッド' が呼ばれます。
・サインアップが成功すると、auth.service.tsにある 'isLogined' に値を代入され、'next()' が走る想定です。
・その上で、app.component.tsの 'ngOnInit()' 内にある 'subscribe' が購読をはじめ、'isLogined' に値が入り、
表記を変更する構図を思い描いています。

わかりづらい文章で申し訳ございませんが、何卒よろしくお願い致します。

【Angular / Rxjs】next() に値を代入してもsubscribeで購読できない

### 前提・実現したいこと

Anguar8にて、ユーザー情報を複数のコンポーネントに提供するUserServiceと、UserServiceを利用するコンポーネントの一つ：ユーザー情報編集画面（UserEditComponent）を作成しています。
編集画面には入力欄と送信ボタンを配置し、送信ボタンをクリックするとUserServiceのユーザー情報を更新するようにしたいです。

### 発生している問題
編集画面の入力欄でユーザー情報を書き換えると、逐次UserServiceの内容も更新されてしまいます。
ServiceからComponentへのデータの渡し方を修正する？ことで、送信ボタンのクリックまでUserServiceの内容を書き換えない方法がないか探しています。

### 該当のソースコード

【user.ts】ユーザー名と年齢からなるUserクラスを定義しています。
```TypeScript
export class User{
    name: string;
    age: number;
}
```
【user.service.ts】UserServiceでユーザー情報を保持し、複数のコンポーネントに提供する予定です。
```TypeScript
import { Injectable } from '@angular/core';
import { User } from './user';
import { Observable, of } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class UserService {

  user: User = { name: "Tanaka", age: 20 };
  getUser(): Observable<User>{
    return of(this.user);
  }
  
  updateUser(newUser: User){
    this.user = newUser;
  }

  //確認用
  logServiceUser(): void{
    console.log(this.user);
  }

  constructor() { }
}
```

【user-edit.component.ts】UserServiceから受け取ったユーザー情報をngModelを使ってInput要素にバインドし、編集画面を作成しました。
Input要素の内容を書き換えた後、Submitボタンがクリックされ（＝onClick()が呼ばれ）たタイミングでUserService側の情報を更新したいのですが、実際にはInput要素を書き換えた時点でUserService側のデータも更新されてしまいます（checkServiceUser()関数を使って確認済み）。
```TypeScript
import { Component, OnInit } from '@angular/core';
import { User } from '../user';
import { UserService } from '../user.service';

@Component({
  selector: 'app-user-edit',
  template: `
    <input type="text" [(ngModel)]="user.name">
    <input type="number" [(ngModel)]="user.age">
    <button (click)="onClick()">submit</button>
    <button (click)="checkServiceUser()">check</button>
  `
})
export class UserEditComponent implements OnInit {

  user: User;
  getUser(): void{
    this.userService.getUser()
    .subscribe( user => this.user = user );
  }

  onClick(){
    //Submitがクリックされた時点でuserServiceのデータを更新したい。
    this.userService.updateUser(this.user);
  }
  checkServiceUser(){
    console.log("check clicked");
    this.userService.logServiceUser();
  }

  constructor( private userService: UserService ) { }

  ngOnInit() {
    this.getUser();
  }

}
```

### 考えたこと

ユーザー情報がサービスからコンポーネントに渡される際、参照渡しで渡されるため、コンポーネント側でのデータ更新が直接サービスに反映されてしまっているのではと考えています。

このままでも「サービスを使った複数コンポーネント間のデータの共有」自体は非常に簡便に行えるのですが、送信ボタンのクリック時に内容確認の処理を挟む等、不都合ある場面が生じそうだと考えます。
また、上記のソースコードはサービスのプロパティをコンポーネントが直接書き換えているように思え、サービスが自身のメソッドでこれを行うように修正の必要があると考えています。

問題意識自体に誤りがある場合（内容確認は別途バリデーションの仕組みを使うべき・別にコンポーネントがサービスのデータを書き換えても問題ない、など）は恐縮ですが、ご指摘いただければ幸いです。

### 補足情報（FW/ツールのバージョンなど）

Angular: 8.2.14
Node: 12.14.0

【Angular】ComponentがServiceのデータを直接書き換えないようにしたい

ionic3（Angular4）でasync、awaitを使った同期処理でAPIへのリクエストを順次行う処理を実装しています。

以下のようなコードで、こちらの出力を期待しているのですが、
```
0
APIのレスポンス
1
APIのレスポンス
2
APIのレスポンス
```

このような形になってしまいます。何がまずいのでしょうか？
```
0
1
2
APIのレスポンス
APIのレスポンス
APIのレスポンス
```

コード
```
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Http, Headers,RequestOptions } from '@angular/http'
import { Observable, Subject } from 'rxjs'

import 'rxjs/add/operator/map'
import 'rxjs/add/operator/catch'

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(
    public navCtrl: NavController,
    public http: Http
  ) {
  }

  ionViewDidEnter() {
    // 実験1
    for (let i = 0; i < 3; i++) {                                                                                                                                                                                                             
      (async () => {
        console.log(i)                                                                                                                                                                                                                          
        let result = await this.requestApi()                                                                                                                                                                                                  
        console.log(result)                                                                                                                                                                                                                   
      })()                                                                                                                                                                                                                                    
    }                                                                                                                                                                                                                                         

    // 実験2
    for (let i = 0; i < 3; i++) {
      console.log(i)
      this.requestApiAsync(result => console.log(result))                                                                                                                                                                                                             
    }    
  }
  async requestApiAsync() {
    const result = await this.requestApi()
    return result
  }

  requestApi() {
    return new Promise(resolve => {
      let url = 'http://example.com/path/to'
      let body = 'key=value'

      let headers = new Headers({
        "Content-Type": "application/x-www-form-urlencoded"
      })

      let options = new RequestOptions({
        headers: headers
      })

      return this.http.post(url, body, options)
        .map(response => response)
        .catch(error => error)
        .subscribe(result => resolve(result.json()))
    })

  }
}
```

async awaitが意図した動きになりません

Angular After Tutorial(https://gitbook.lacolaco.net/angular-after-tutorial/)を参考に学習中です。
画面（app.component.html） に wkData.idとwkData.nameを結合したものをwkData.convDataに格納して
表示しようとしています。
DataService.tsの※１でコメントアウトされた方法で表示することは可能なのですが、
rxjsを使用し、webからJSONデータを取得したものをそのまま表示するだけでなく、複雑な加工を施したいときを
想定し、※１の内容をメソッドにして呼び出しにしようとしていますがエラーになってしまいます。
（以下のようなエラーの内容です）
ERROR TypeError: "wkData.convfunc is not a function"
fetchData DataService.ts:19
※１の内容をメソッド呼び出しにするにはどう修正すればよいでしょうか？


app.component.html
```ここに言語を入力
<div *ngFor='let wkData of viewData | async'>
  <p >name... {{wkData.name}}   convData... {{wkData.convData}}</p>
</div>

```

app.component.ts
```ここに言語を入力
import { Component, OnInit } from '@angular/core';
import { DataService} from './DataService';

@Component({  selector: 'app-root',  templateUrl: './app.component.html'}  )
export class AppComponent implements OnInit {
  viewData = this.dataService.data;

  constructor(private dataService: DataService ) {}

  ngOnInit() { this.dataService.fetchData(); }
}
```

DataService.ts
```ここに言語を入力
import { Injectable } from '@angular/core';
import { BehaviorSubject} from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { Data } from './Data';

@Injectable({  providedIn: 'root'})
export class DataService {
  // tslint:disable-next-line: variable-name
  private _data = new BehaviorSubject<Data[]>([]);

  get data() { return this._data.asObservable(); }

  constructor(private http: HttpClient) { }

  fetchData(): void {
    this.http.get<Data[]>('/api/data')
//    .subscribe( datas => { datas.forEach( wkData => { wkData.convData = wkData.id + ' ' + wkData.name; } ); // ※１
      // ※１が複雑な加工になったときを想定し、※１の内容を下の行↓のようにメソッド呼び出しにしたい
      .subscribe( datas => { datas.forEach( wkData => { wkData.convfunc(); } );
                             this._data.next(datas);
                         });
  }
}
```

Data.ts
```ここに言語を入力
export class Data {
  id: string;
  name: string;
  convData: string;  // idとnameを結合したものを格納したい

  convfunc(): void {
    this.convData = this.id + ' ' + this.name;
  }
}
```

app.module.ts
```ここに言語を入力
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
import { WebData} from './WebData';
import { HttpClientModule } from '@angular/common/http';
import { DataService } from './DataService';

@NgModule({
  declarations: [ AppComponent ],
  imports: [ BrowserModule, HttpClientModule,InMemoryWebApiModule.forRoot(WebData)],
  providers: [DataService],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

WebData.ts
```ここに言語を入力
import { InMemoryDbService } from 'angular-in-memory-web-api';

export class WebData implements InMemoryDbService {
  createDb() {
    const data = [ { id: 1, name: 'a'}, { id: 2, name : 'b'} ];
    return { data };
  }
}
```

index.html
```ここに言語を入力
<!doctype html><html lang="en">
  <head><base href="/"></head>
  <body><app-root></app-root></body>
</html>

```

main.ts
```ここに言語を入力
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

```

---
動作環境
Angular CLI: 8.3.17
Node: 12.13.1
OS: linux x64
Angular: 
... 
Package                      Version
@angular-devkit/architect    0.803.17
@angular-devkit/core         8.3.17
@angular-devkit/schematics   8.3.17
@schematics/angular          8.3.17
@schematics/update           0.803.17
rxjs                         6.4.0

subscribeの中で呼び出すの複数の処理を１つのメソッドにまとめたい

### 前提・実現したいこと

カレンダーアプリを制作しており、日付ごとのページでイベント操作をできるようにしたいです。

※参考画像
![イメージ説明](7a71587039f235a37163cdfc1b95c9c3.jpeg)
![イメージ説明](6c629d64a8b1b86c179f71873af4b255.jpeg)

### 補足情報（FW/ツールのバージョンなど）

カレンダーのライブラリー: [ionic2-calendar](https://www.npmjs.com/package/ionic2-calendar)

ionic info
```
Ionic:

   Ionic CLI                     : 5.2.5 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.7.1
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : none
   Cordova Plugins   : no whitelisted plugins (0 plugins total)

Utility:

   cordova-res : 0.6.0 
   native-run  : 0.2.8 

System:

   NodeJS : v10.15.1 (/usr/local/bin/node)
   npm    : 6.4.1
   OS     : macOS Mojave
   Xcode  : Xcode 10.2.1 Build version 10E1001


```

参考にしたサイト: 

[idを使った画面遷移を参考にした](https://devdactic.com/ionic-4-firebase-angularfire-2/)

[カレンダーとFirebaseの接続を参考にした](https://www.youtube.com/watch?v=SYz-tH3XOF8)



### 発生している問題・エラーメッセージ

**日付ごとにイベントを判別できない。**

イベントのidをパラメーターとして渡すために以下のようにしました。
```html
<ion-header>
  <ion-toolbar color="danger">
      <ion-buttons slot="start">
          <ion-menu-button></ion-menu-button>
        </ion-buttons>
    <ion-title>
      {{ viewTitle }}
    </ion-title>
    <ion-buttons slot="end">
        <ion-button (click)="today()">Today</ion-button>
      </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content padding>

    <calendar [eventSource]="eventSource"
    [calendarMode]="calendar.mode"
    [currentDate]="calendar.currentDate"
    (onCurrentDateChanged)="onCurrentDateChanged($event)"
    (onEventSelected)="onEventSelected($event)"
    (onTitleChanged)="onViewTitleChanged($event)"
    (onTimeSelected)="onTimeSelected($event)"
    [locale]="calendar.locale"
    *ngFor="let dayEvent of (dayEvents | async)"
    [routerLink]="['/day', dayEvent.id]"
    >
</calendar>

<ion-list>
  <ion-item *ngFor="let dayEvent of (dayEvents | async)">
    
   <p>{{ dayEvent.id }}</p>
  </ion-item>
</ion-list>
</ion-content>
```

すると、イベントの数だけカレンダーが作成されます（*ngForなので当たり前ですが）

**Firebaseにイベントが3つあるとして、idが a, b, c とします。
するとカレンダーが3つ作成され、一番上のカレンダーのどこを押してもidがaとなり、真ん中のカレンダーのどこを押してもidがbとなり、、、**

という感じです。

カレンダーが１つで、かつ日付ごとにイベントを判別できない状態です。

**仮に5日にイベントがあったとして、5日を押すと5日のページに遷移し、イベントありと表記されている。6日を押すと6日のページに遷移するが、イベントなしと表記されている。**

このような状態にしたいです。



### 該当のソースコード

#### home.page.html

```html
<ion-header>
  <ion-toolbar color="danger">
      <ion-buttons slot="start">
          <ion-menu-button></ion-menu-button>
        </ion-buttons>
    <ion-title>
      {{ viewTitle }}
    </ion-title>
    <ion-buttons slot="end">
        <ion-button (click)="today()">Today</ion-button>
      </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content padding>

    <calendar [eventSource]="eventSource"
    [calendarMode]="calendar.mode"
    [currentDate]="calendar.currentDate"
    (onCurrentDateChanged)="onCurrentDateChanged($event)"
    (onEventSelected)="onEventSelected($event)"
    (onTitleChanged)="onViewTitleChanged($event)"
    (onTimeSelected)="onTimeSelected($event)"
    [locale]="calendar.locale"
    [routerLink]="['/day', dayEvent.id]"
    >
</calendar>

<ion-list>
  <ion-item *ngFor="let dayEvent of (dayEvents | async)">
    
   <p>{{ dayEvent.id }}</p>
  </ion-item>
</ion-list>
</ion-content>
```

#### home.service.ts

```typescript
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;
  endTime: Date;
  startTime: Date;
  allDay: boolean;
}

@Injectable({
  providedIn: 'root'
})
export class HomeService {
  // 取得したコレクションを格納
  private dayCollection: AngularFirestoreCollection<DayEvent>;
  // コレクションのストリームを格納
  private dayEvents: Observable<DayEvent[]>;

  eventSource = [];
  selectedDate = new Date();

  constructor(
    private afs: AngularFirestore
  )
  {
    // コレクションを取得してdayCollectionに格納
    this.dayCollection = this.afs.collection<DayEvent>(`events`);
    this.dayEvents = this.dayCollection.snapshotChanges().pipe(
      map(actions => {
        return actions.map(a => {
          const event = a.payload.doc.data();
          const id = a.payload.doc.id;
          return { id, ...event };
        });
      })
    );
  }

  getEvents(): Observable<DayEvent[]> {
    return this.dayEvents;
}

  getEvent(id: string) {
    return this.dayCollection.doc<DayEvent>(id).valueChanges().pipe(
      take(1),
      map(dayEvent => {
        dayEvent.id = id;
        console.log('getEventで取った ' + dayEvent.id);
        return dayEvent;
      })
    );
  }

  addNewEvent() {
    const start = this.selectedDate;
    const end = this.selectedDate;
    end.setMinutes(end.getHours() + 1);
    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);
  }

  deleteEvent(id: string): Promise<void> {
    return this.afs.collection(`events`).doc(id).delete();
  }

}
```

#### home.page.ts

```typescript
import { AngularFirestore } from '@angular/fire/firestore';
import { HomeService, DayEvent } from './home.service';
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
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'
  };

  // ここでのプロパティがhtmlで使われる
  private dayEvents: Observable<DayEvent[]>;


  constructor(
    private router: Router,
    private homeService: HomeService,
    private db: AngularFirestore
  ) {
    // Firebaseからイベント取得
    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);
        });
    });

    }


  ngOnInit() {
    this.dayEvents = this.homeService.getEvents();
  }

  onViewTitleChanged(title) {
    this.viewTitle = title;
  }



  onEventSelected(event) {
    console.log('Event selected:' + event.startTime + '-' + event.endTime + ',' + event.title);
  }

  // 選択した日付を取得&サービスのaddNewEventを設定
  onTimeSelected(ev) {
    const selected = new Date(ev.selectedTime);
    console.log('選択した日は ' + selected);
    this.homeService.selectedDate = selected;
  }

  onCurrentDateChanged(event: Date) {
  }

  reloadSource(ev) {
    console.log('range changed: startTime: ' + ev.startTime + ', endTime: ' + ev.endTime);
  }


  today() {
    this.calendar.currentDate = new Date();
  }
}
```

#### day.page.html

```html
<ion-header>
  <ion-toolbar>
      <ion-buttons slot="start">
          <ion-back-button defaultHref="/home"></ion-back-button>
        </ion-buttons>
        <ion-buttons slot="end">
          <ion-button (click)="addNewEvent()">登録</ion-button>
        </ion-buttons>
    <ion-title>
      Dayページ
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-button (click)="deleteEvent()">削除</ion-button>
  
  <p>{{ dayEvent.id }}</p>
</ion-content>
```

#### day.page.ts

```typescript
import { HomeService, DayEvent } from './../home/home.service';
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { ToastController } from '@ionic/angular';


@Component({
  selector: 'app-day',
  templateUrl: './day.page.html',
  styleUrls: ['./day.page.scss'],
})

export class DayPage implements OnInit {
  eventSource = [];
  viewTitle;
  selectedDate = new Date();

  dayEvent: DayEvent = {
    title: '',
    startTime: this.selectedDate,
    endTime: this.selectedDate,
    allDay: true
  };
  id = null;

  constructor(
    private homeService: HomeService,
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private toastCtrl: ToastController,
  ) {
  }

  ngOnInit() {
    // idを取得
    this.id = this.activatedRoute.snapshot.paramMap.get('id');
  }

  ionViewWillEnter() {
    if (this.id) {
     this.homeService.getEvent(this.id).subscribe(dayEvent => {
        this.dayEvent = dayEvent;
      });
    }
  }


  addNewEvent() {
    this.homeService.addNewEvent().then(() => {
      this.router.navigateByUrl('/');
    });
  }

  deleteEvent() {
    this.homeService.deleteEvent(this.dayEvent.id).then(() => {
      this.router.navigateByUrl('/');
      this.showToast('削除しました');
    },
      err => {
        this.showToast('問題が発生しました。削除できなかったです。');
      });
  }

  showToast(msg) {
    this.toastCtrl.create({
      message: msg,
      duration: 2000
    }).then(toast => toast.present());
  }
}
```

RxJS