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

Question

我正在按角度创建一个应用程序，其中一项任务是，我需要从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，我认为我存储到数组的方式出了问题，请帮忙，谢谢！

Answer 1

您的问题之所以发生，是因为事物是异步进行的：

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

由于看起来您想返回一个可观察的对象，因此请勿在您的方法内部使用subscribe() 。 只需在可观察到的snapshotChanges上执行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％正确：-\\
但希望能为您指明正确的方向。 :-)