数据不是来自 Angular 应用程序中的 Firestore答案

【问题标题】：Data is not coming from firestore in Angular app数据不是来自 Angular 应用程序中的 Firestore
【发布时间】：2021-09-06 16:53:42
【问题描述】：

我对 Angular 还很陌生，我正在学习服务。我正在创建一个桌面预订应用程序，我正在尝试从 firestore 获取数据。这就是我的服务的样子。

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import {
  AngularFirestore,
  AngularFirestoreCollection,
} from '@angular/fire/firestore';
import { Reservation } from '../models/Reservation';

@Injectable({
  providedIn: 'root',
})
export class ReservationService {
  reservationCollection!: AngularFirestoreCollection<Reservation>;
  reservation!: Observable<Reservation[]>;

  constructor(private afs: AngularFirestore) {
    this.reservationCollection = this.afs.collection('Building').doc('Floors').collection('Floor1', (ref) =>
      ref.orderBy('order', 'asc')
    );
  }

  getSeats(): Observable<Reservation[]> {
    this.reservation = this.reservationCollection.snapshotChanges().pipe(map((changes: any) => {
      return changes.map((action: any) => {
        const data = action.payload.doc.data() as Reservation;
        data.id = action.payload.doc.id;
        return data
      })
    }))
    return this.reservation;
  }
}

这是 ts 文件

import { Component, OnInit } from '@angular/core';
import { ReservationService } from 'src/app/services/reservation.service';
import { Reservation } from 'src/app/models/Reservation';
import { AngularFireAuth } from '@angular/fire/auth';


@Component({
  selector: 'app-reservation',
  templateUrl: './reservation.component.html',
  styleUrls: ['./reservation.component.css']
})
export class ReservationComponent implements OnInit {
  seats: Reservation[] = [];

  constructor(
    private reservation: ReservationService,
    private auth: AngularFireAuth
    ) {
      console.log(this.seats)
    }

  ngOnInit(): void {
    this.reservation.getSeats().subscribe((seats) => {
      this.seats = seats
    })
  }
}

该服务运行良好，当我将数据放入控制台时，有时会显示正常。但是当我尝试设置座位属性（this.seats = seat）时，它不会更新，只是一个空数组。我觉得这与服务异步有关，但我不知道如何使用 Firestore 纠正它。有什么想法吗？

【问题讨论】：

标签： angular firebase google-cloud-firestore

【解决方案1】：

问题是您没有等待服务中的getSeats 函数在完成之前返回任何内容。正如您所料，这是因为您的函数是异步的。

像这样修改服务中的 getSeats 函数以返回数据的 observable：

  async getSeats() {
    this.reservation = await this.reservationCollection.snapshotChanges().pipe(map((changes: any) => {
      return changes.map((action: any) => {
        const data = action.payload.doc.data() as any;
        data.id = action.payload.doc.id;
        return data
      })
    }))

    return this.reservation;
  }

然后在您的组件中将您的席位声明更改为 Observable：

  seats: Observable<any[]> | undefined;

然后将您的 ngOnInit 更改为：

  async ngOnInit(): Promise<void> {
    this.seats = await this.reservation.getSeats();

    this.seats.subscribe((data: any) => {
      console.log(data);
    })
  }

此方案中的订阅只是为了您自己在调试时的利益，以便您可以查看数据。在实践中，您可能会使用 ngFor 循环遍历 HTML 模板中的每个席位。

PS，您需要重新添加您的预订模型。我删除了它，因为我不知道您的数据是什么样的 :)

【讨论】：