时间戳

首页 > 解决方案 > 如何检索子集合文档 - Angular Firebase

javascript - 如何检索子集合文档 - Angular Firebase

问题描述

我正在尝试在我的计划子集合中获取数据，以便可以在我的 html 模板中显示它。

到目前为止，我在 schedule.service.ts中的getScheduleList方法中得到了什么。看来无论我尝试做什么，我都只会获取元数据。

我尝试使用：https ://github.com/angular/angularfire获取文档，因为 firebases 自己的有点缺乏。

调度服务.ts

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

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

  constructor(public fireService: AngularFirestore, private authService: AuthService) {
  }

  getScheduleList() {
    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;

        if (data.UID === this.authService.currentUserId) {
          console.log(id);
                    this.fireService.collection(`companies/${id}/schedules`).snapshotChanges().subscribe(result => {
            console.log('test', result);
          });
        }
      });
    })).subscribe();
  }
}

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';
import {ActivatedRoute} from '@angular/router';

@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
  scheduleList: ScheduleInterface[];

  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', '10', '00:00');
    this.schedule = new Schedule('', 'default', '2020', '00:00');
    this.getScheduleList();

  }

  // 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);
    }
  }

  getScheduleList() {
    const test = this.serviceSchedule.getScheduleList();
    // console.log(test);
  }


}

火力基地集合 在此处输入图像描述

标签： javascriptangulartypescriptgoogle-cloud-firestorecollections

解决方案

这几乎肯定不会像您期望的那样：

this.fireService.collection('companies/{id}/schedules')

如果你想在id这里使用字符串内部的值，你应该这样表达：

this.fireService.collection(`companies/${id}/schedules`)

注意反引号和美元符号。这是 JavaScript 使用模板文字进行字符串插值的方式。

推荐阅读