Angularでfirestoreのコレクションからデータ一覧を取得する

1

概要

Angular2以降でfirestoreのコレクションからデータ一覧を取得する方法。

読み込む

コレクションに対して、valueChanges()をsubscribeする。valueChanges()ってなんだ。。

import { Component, ViewChild } from '@angular/core';
import { AuthService } from '../auth/auth.service';
import { AngularFirestore } from '@angular/fire/firestore';

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

  constructor(
    public auth: AuthService,
    private firestore:AngularFirestore,
  ) {
    this.initialize();
    }

  initialize(){
      this.auth.getAuthUid().subscribe(uid =>{
        console.log(uid,'e');
        this.authUid = uid;
      })

  }

  test(){
    this.firestore.collection('users')
      .doc('data').collection(this.authUid)
      .valueChanges().subscribe(value =>{
        console.log(value);
      },
      error =>{
        console.log('error');
      })
  };
}

オブジェクトの配列で帰ってくる。

書き込み

こちらの方がシンプル

                      this.firestore.collection('users')
                        .doc('data')
                        .collection(this.authUid)
                        .doc(String(new Date().getTime()))
                        //.doc('test')
                        .set({
                          'title':this.originalImgName,
                          'content':data,
                          'filename':this.originalImgName,
                          'lastUpade':String(new Date().getTime()),
                        });