angularfire2 - 如何检索单个 Firestore 文档的 ID？

Question

这是我的代码:

import { Component, OnInit } from '@angular/core';

import { AngularFirestore
       , AngularFirestoreCollection
       , AngularFirestoreDocument } from 'angularfire2/firestore';

import { Observable } from 'rxjs/Observable';

interface Country {
  id?: string;
  name?: string;
  code?: string;
  flag?: string;
  continent?: string;
}


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
    title = 'Firestore - Documents';

    private countryRef: AngularFirestoreCollection<Country>;
    docId: any;

    constructor( private afs: AngularFirestore ) {

        this.countryRef = this.afs.collection('Country', ref => ref.where('code', '==', 'za'));

        this.docId = this.countryRef.snapshotChanges().map( changes => {
            return changes.map(a => {
                const data = a.payload.doc.data() as Country;
                data.id = a.payload.doc.id;
            return data.id;
            });
        });

    console.log(this.docId);

  }

  ngOnInit() {}

}

我期待一个丑陋的 Firestore id 但我得到了这个:

Observable {_isScalar: false, source: Observable, operator: MapOperator}

Answer 1

您正在以 Observable 形式获取数据 const data = a.payload.doc.data() as Country
您需要订阅才能获取数据

this.docId.subscribe(docs => {
  docs.forEach(doc => {
    console.log(doc.id);
  })
})

这是推荐的方法

export class AppComponent implements OnInit {
title = 'Firestore - Documents';

private countryRef: AngularFirestoreCollection<Country>;
docId: Observable<Country[]>;

constructor( private afs: AngularFirestore ) {

    this.countryRef = this.afs.collection('Country', ref => ref.where('code', '==', 'za'));

    this.docId = this.countryRef.snapshotChanges().map( changes => {
        return changes.map(a => {
            const data = a.payload.doc.data() as Country;
            const id = a.payload.doc.id;
            return { id, ...data };
        });
    });

this.docId.subscribe(docs => {
  docs.forEach(doc => {
    console.log(doc.id);
  })
})

}

  ngOnInit() {}

}

使用 angularfire2 从 firestore 检索数据的最常见做法是 .valueChanges()和 .snapshotChanges() . valueChanges() 方法仅提供数据。它去除所有元数据，包括 keys .另一方面 .snapshotChanges() 将返回包括元数据在内的所有数据。

在您的代码中执行 const data = a.payload.doc.data() as Country;它只返回没有键的数据。当您将其映射到 const data 时id 将被忽略，因为您指定了像 id?: string; 这样的构造函数空安全模式。

然后你会得到 ID const id = a.payload.doc.id;不知何故，您需要以您想要的方式归还 interface是。这样做 return { id, ...data };您也在返回带有 id 的所有数据。和 ...data将其所有字段一一附加在 id 之后。您可以了解有关此功能的更多信息 here希望你能理解。