时间戳

首页 > 解决方案 > 从firestore获取数据并放入Ionic中的数组

javascript - 从firestore获取数据并放入Ionic中的数组

问题描述

我正在创建一个有角度的应用程序，一项任务是，我需要从 Firestore 读取数据并保存到一个数组中，我的代码片段如下：

public getListingData(): Observable < RequestListingModel > {
  console.log("getting listing...");
  
  this.firestore.collection('Requests').snapshotChanges().subscribe(
    requests => {
      this._listRequestItems = requests.map(a => {
        const data = a.payload.doc.data() as RequestItemModel;
        data.requestId = a.payload.doc.id;

        console.log("doc found - " + data.requestId);
        return data;
      })

    });

  const requestListingModel = {
    items: this._listRequestItems
  }
  as RequestListingModel;

  return of(requestListingModel);
}
我的 RequestListingModel 代码如下：

import * as dayjs from 'dayjs';

export class RequestItemModel {
  name: string;
  address: string;
  category: string;
  requestId: string;
  postBy: string;
  description: string;
  // Default mock value
  // expirationDate = '12/01/2018';
  expirationDate: string = dayjs().add(5, 'day').format('MM/DD/YYYY HH:mm:ss') as string;
}

export class RequestListingModel {
  items: Array<RequestItemModel> = [];

  constructor(readonly isShell: boolean) { }
}

而且它不起作用，因为我在调用函数getListingData（）时总是得到空返回，但是控制台可以成功打印出每个requestId，我认为我存储到数组的方式有问题，请帮助，谢谢！

标签： javascriptangularionic-frameworkgoogle-cloud-firestore

解决方案

您的问题正在发生，因为事情是异步发生的：

所以在填充数组return of(requestListingModel);之前被调用this.firestore.collection('Requests').snapshotChanges().subscribe(...)，从而返回一个空数组的可观察对象。

因为看起来你想返回一个可观察的，所以不要subscribe()在你的方法中。只需map()对snapshotChangesobservable 执行 a 以转换输出，并让消费代码订阅您的getListingData()方法。

public getListingData(): Observable < RequestListingModel > {
    console.log("getting listing when someone subscribes...");


    return this.firestore.collection('Requests').snapshotChanges().pipe(
        map(requests => { 
            let requestListingModel = {
                items: []
            } as RequestListingModel;

            requests.map(a => {
                let data = a.payload.doc.data() as RequestItemModel;
                data.requestId = a.payload.doc.id;

                console.log("doc found - " + data.requestId);

                requestListingModel.items.push(data);
            });

            return requestListingModel;
        })
    );
}

注意：仍然......目前无法对此进行测试，因此它可能不是 100% 正确的：-\
但希望为您指明正确的方向。:-)

推荐阅读