Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Firestoreから特定のフィールドの値を取得する最も簡単な方法(Angular)

はじめに

Firebase Firestoreから特定のフィールドの値を取得する(Angularfire)
:point_up:こちらの記事で書いてあるように、特定のフィールドの値を取得するのにかなり苦戦した経験がある。。。

しかし、何故か今回はすんなりと、しかもスマートなコードでできました:joy:
なんで前はこんなに苦労したんだろう???(わかる人、教えてください・・)

実現したい事

https06.jpeg

こんな感じでFirestoreにデータが入ってたとして、欲しいデータはuserのフィールドであるisLockedの値!

こいつを取得するにはどうすればいいか?

環境

Angularfireがプロジェクトに入っていること

フィールドの値を取得

※必要最小限のコードです

import { AngularFireAuth } from '@angular/fire/auth';
import { AngularFirestore } from '@angular/fire/firestore';

export class SettingsPage implements OnInit {

isLocked;

constructor(
    private afAuth: AngularFireAuth,
    private db: AngularFirestore,
  ) {}

 ngOnInit() {
    this.afAuth.auth.onAuthStateChanged((user) => {
      if (user != null) {
    const userRef = this.db.collection('users').doc(user.uid);
    userRef.get().subscribe(docSnapshot => {
       // get('isLocked')でフィールド名を指定
      const locked: boolean = docSnapshot.get('isLocked');
      console.log('ロックされていますか? ' + locked);
      this.isLocked = locked;
    });
      }
    });
  }

}

これでusers/uid/の中にあるisLockedという値(ここではtrueかfalse)を取得できました!

kokogento
エストニアの電子国民e-Residencyです。2020/09より、東京で人生初の正社員に! 〇活を記録するアプリをIonic + Angularで開発し、運営中。アプリについては下記URLを参照。現在Vueを学習中。。。
https://gengendiary.world/first-app/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away