刷新页面时不获取集合 - AngularFire

Question

我在刷新页面时遇到问题，它没有在我的构造函数中初始化我的调用。

我一直在使用这个作为指南：

https://www.youtube.com/watch?v=gUmItHaVL2w&ab_channel=TraversyMedia
https://github.com/angular/angularfire

编辑：

为了让它再次工作，我必须转到另一个页面并点击刷新并返回，然后它才能正确调用它。

schedule.service.ts

import {Injectable} from '@angular/core';
import {AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument} from '@angular/fire/firestore';
import {ScheduleInterface} from '../../models/schedule';
import {Observable} from 'rxjs';
import {map} from 'rxjs/operators';
import {AuthService} from '../auth/auth.service';


@Injectable({
  providedIn: 'root'
})
export class ScheduleService {
  schedulesCollection: AngularFirestoreCollection<ScheduleInterface>;
  schedules: Observable<ScheduleInterface[]>;
  scheduleDoc: AngularFirestoreDocument<ScheduleInterface>;

  constructor(private afs: AngularFirestore, private authService: AuthService) {
    console.log('scheduleService called1');
    this.schedulesCollection = this.afs.collection('schedules', ref => ref
      .where('UID', '==', this.authService.currentUserId)
      .orderBy('user', 'asc'));
    console.log('scheduleService called2');
    this.schedules = this.schedulesCollection.snapshotChanges()
      .pipe(map(changes => {
        console.log('scheduleService called3');
        return changes.map(a => {
          // doesn't get called when page gets refreshed
          console.log('scheduleService called4');
          const data = a.payload.doc.data() as ScheduleInterface;
          data.docRef = a.payload.doc.id;
          return data;
        });
      }));
  }

  getSchedules() {
    return this.schedules;
  }

控制台

Answer 1

当 schedules 仍然为空时，您可能会得到第一个值。试试这个：

get mySchedules() { return this.schedules }

或者根本不调用该方法，只使用 scheduleService.schedules。

Answer 2

您没有订阅 observable。将用于获取数据的逻辑移出构造函数并移至返回可观察对象的方法中。

   getSchedules(): Observable<ScheduleInterface> {
        return this.afs
            .collection("schedules", (ref) =>
                ref
                    .where("UID", "==", this.authService.currentUserId)
                    .orderBy("user", "asc")
            )
            .snapshotChanges()
            .pipe(
                map((changes) => 
                    changes.map((a) => {
                        const data = a.payload.doc.data() as ScheduleInterface;
                        data.docRef = a.payload.doc.id;
                        return data;
                    })
                )
            );
    }

将服务注入到您想要获取计划的组件中，然后从那里调用服务中的 getSchedules 方法。

export class YourComponent implements OnInit {

        constructor(protected scheduleService: ScheduleService){}

        ngOnInit(): void {
            this.scheduleService.getSchedules().subscribe(result => {
                console.log(result);
            });
        }
    }

刷新页面时不获取集合 - AngularFire

Dosen 't get collection when refreshing page - AngularFire

angular

typescript

observable

angularfire