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

Question

我正在创建一个 Angular 应用程序，其中一项任务是，我需要从 Firestore 读取数据并保存到一个数组中，我的代码 sn-p 如下：

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，我认为我存储到数组的方式有问题，请帮忙，谢谢！

Answer 1

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

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

因为看起来你想要返回一个 observable，所以不要在你的方法中使用subscribe()。只需在 snapshotChanges observable 上执行 map() 即可转换输出，并让消费代码订阅您的 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% 正确：-\
但希望为您指明正确的方向。 :-)