如何从firebase中的集合中获取单个文档ID - Angular

Question

我正在使用 Angular 11 和 firebase firestore。

我想获取集合中单个文档的文档 ID，以便我可以在名为 schedules 的子集合中创建一个子集合。

在 schedule.service.ts 我尝试使用以下指南，但没有成功：https://github.com/angular/angularfire/blob/master/docs/firestore/collections.md

更新： 我现在正在获取完整的数据列表 + 文档的 ID。

如何使用 UID（用户 ID）查询以查找我的文档并创建一个名为 schedule 的子集合？

schedule.service.ts

import {Injectable} from '@angular/core';
import {AngularFirestore} from '@angular/fire/firestore';
import {Schedule} from '../../model/schedule';
import {map} from 'rxjs/operators';


@Injectable({
  providedIn: 'root'
})
export class ScheduleService {

  constructor(public fireService: AngularFirestore) {
  }

  createSchedule(schedulecontent: Schedule) {
    // prints
    console.log('schedule', schedulecontent);

    this.fireService.collection<any>('companies').snapshotChanges().pipe(map(actions => {
      return actions.map(a => {
        const data = a.payload.doc.data();
        const id = a.payload.doc.id;
        console.log('id', id, 'data', data);
        return {id, data};
      });
    })).subscribe();
    
    // this only gets the data in the doc
    // const res = this.fireService.collection('companies', ref =>
    //   ref.where('UID', '==', this.authService.currentUserId)).valueChanges().subscribe(data => {
    //   console.log('data', data[0]);
    // });
    //
    // console.log('test', res);
    // return res;
    // return this.fireService.collection('companies').doc().collection('schedules').add(schedulecontent);
  }
}

schedule.component.ts

import {Component, OnInit} from '@angular/core';
import {NgbModal, NgbDateStruct, NgbCalendar, NgbModalConfig} from '@ng-bootstrap/ng-bootstrap';
import {NgForm} from '@angular/forms';
import {Schedule, ScheduleInterface} from '../../model/schedule';
import {ScheduleService} from '../../service/schedule/schedule.service';


@Component({
  selector: 'app-schedule',
  templateUrl: './schedule.component.html',
  styleUrls: ['./schedule.component.css'],
})
export class ScheduleComponent implements OnInit {

  dateModel: NgbDateStruct; // Holds the date structure day/month/year format
  date: { year: number, month: number }; // Is for the datepicker month and year selector
  schedule: ScheduleInterface; // schedule object uses interface from schedule models

  constructor(private config: NgbModalConfig,
              private modalService: NgbModal,
              private calendar: NgbCalendar,
              private serviceSchedule: ScheduleService) {

    // Customize default values of modals used by this component tree
    config.backdrop = 'static';
    config.keyboard = false;
  }

  // Initialises the schedule object with default values
  ngOnInit(): void {
    this.schedule = new Schedule('', 'default', this.dateModel, '00:00');
  }

  // Opens modal window
  open(content) {
    this.modalService.open(content);
  }

  // Gives to current day in the datepicker
  selectToday() {
    this.dateModel = this.calendar.getToday();
  }

  // Creates new task for the schedule
  createSchedule(schedulecontent: NgForm) {
    console.log(schedulecontent.value);

    if (schedulecontent.valid) {
      this.serviceSchedule.createSchedule(schedulecontent.value);

    }

  }


}

firebase 集合

Answer 1

我将此作为社区 wiki 答案发布，因此解决问题的 cmets 会反映在实际答案中。

snapshotChanges 返回您需要订阅的Observable：

this.fireService.collection<any>('companies').snapshotChanges().pipe(map(actions => {
      return actions.map(a => {
        const data = a.payload.doc.data();
        const id = a.payload.doc.id;
        console.log('id', id, 'data', data);
        return {id, data};
      });
    })).subscribe();

获得可使用的 UID 后阅读文档：

exampleGetDocument(){ 
      return this.firestore
                 .doc('collectionName/docID') 
                 // you can use either: 
                 // .valueChanges()
                 // or .snapshotChanges()
}