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

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

publicGetListingData（）：可观察的{
log（“获取列表…”）；
此.firestore.collection（'Requests'）.snapshotChanges（）.subscribe(
请求=>{
这个._listRequestItems=requests.map（a=>{
const data=a.payload.doc.data（）作为RequestItemModel；
data.requestId=a.payload.doc.id；
console.log（“找到文档-”+data.requestId）；
返回数据；
})
});
常量requestListingModel={
项目：此。\u listRequestItems
}
as请求列表模型；
返回（requestListingModel）；
}

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

So

返回（requestListingModel）this.firestore.collection（'Requests'）.snapshotChanges（）.subscribe（…）

填充数组之前调用code>，从而返回空数组的可观察值

因为看起来您想要返回一个可观察的，所以不要在方法内部

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;
        })
    );
}

publicGetListingData（）：可观察的{
log（“当有人订阅时获取列表…”）；
返回此.firestore.collection（'Requests'）.snapshotChanges（）.pipe(
映射（请求=>{
让requestListingModel={
项目：[]
}as请求列表模型；
requests.map（a=>{
将data=a.payload.doc.data（）作为RequestItemModel；
data.requestId=a.payload.doc.id；
console.log（“找到文档-”+data.requestId）；
requestListingModel.items.push（数据）；
});
返回请求列表模型；
})
);
}

注意：仍然。。。目前无法对此进行测试，因此可能不是100%正确：-\

---

但希望能为您指明正确的方向。：-）

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

So

返回（requestListingModel）this.firestore.collection（'Requests'）.snapshotChanges（）.subscribe（…）

填充数组之前调用code>，从而返回空数组的可观察值

因为看起来您想要返回一个可观察的，所以不要在方法内部

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;
        })
    );
}

publicGetListingData（）：可观察的{
log（“当有人订阅时获取列表…”）；
返回此.firestore.collection（'Requests'）.snapshotChanges（）.pipe(
映射（请求=>{
让requestListingModel={
项目：[]
}as请求列表模型；
requests.map（a=>{
将data=a.payload.doc.data（）作为RequestItemModel；
data.requestId=a.payload.doc.id；
console.log（“找到文档-”+data.requestId）；
requestListingModel.items.push（数据）；
});
返回请求列表模型；
})
);
}

注意：仍然。。。目前无法对此进行测试，因此可能不是100%正确：-\

---

但希望能为您指明正确的方向。：-）

谢谢，我试图更改为使用map，但它出现了错误：“属性‘map’在类型‘Observable’上不存在，所以我使用了“pipe”，错误消失了，但现在我得到了新的错误：“类型‘RequestItemModel[]”不可分配给类型‘RequestListingModel[]”。现在我的代码是这样的：

public getListingData（）：Observable{console.log(“获取列表…”；返回此.firestore.collection（'Requests'）.snapshotChanges（）.pipe（map（Requests=>Requests.map（a=>{let data=a.payload.doc.data（）作为RequestItemModel；data.requestId=a.payload.doc.id；console.log（“doc found-”+data.requestId）；返回数据；））；}

哦，是的！我忘了

管道（）

。至于类型不匹配，是的，现在的情况是，它发出个人的

RequeSiteModel

，而不是以一组的形式发送。我很快修改了我的答案，输出一个

RequestListingModel

。@Derrick.X，我更新了它。同样，没有退款保证，因为它没有经过测试，但应该会让你满意close:-）是的，它工作了，你救了我一天，非常感谢：-）谢谢，我试图更改为使用map，但出现了错误：“属性“map”在类型“Observable”上不存在，所以我使用“pipe”，错误消失了，但现在我出现了新错误：“类型“RequestItemModel[]”不可分配给类型“RequestListingModel[]”“.Now我的代码是这样的：

public getListingData（）：Observable{console.log（“获取列表…”）；返回this.firestore.collection（'Requests'）.snapshotChanges（）.pipe（map（Requests=>Requests.map（a=>{let data=a.payload.doc.data（）as RequestItemModel；data.requestId=a.payload.doc.id；console.log（“doc found-”+data.requestId）；return data；}”）；}

oh yeah！我忘了

pipe（）

。至于类型不匹配，是的，现在是这样，它发出单个的

RequesItemModel

，而不是以组的形式发送。我很快修改了我的答案，输出了一个

RequestListingModel

…@derick.X，我更新了它。再说一次，因为它没有经过测试，所以没有退款保证，但应该可以让你接近：-）是的，它有效，你救了我一天，非常感谢：-）