json - Angular Firebase将Observable转换为普通对象以在组件内使用数据
问题描述
我正在使用 Angular Firestore 从 Firebase 数据库中提取图像引用。我知道如何从数据库中获取 observable 并通过异步将其挂接到模板中,但我想将数据公开给我的组件以读取 Oninit()。我尝试了多种方法来拖出数据,但都没有成功。下面的代码 Spinets
产品模型.ts
export interface Product {
$key?: string;
name?: string;
price?: number;
condition?: string;
image?: string;
mainPic?: string;
}
product.component.ts
Variables-----
product: Observable<Product>;
Constructor----
----One of the ways I got the firebase document
this.invoicesCollection = this.afs.collection("/Products");
this.product = this.getProduct2("test_product");
---Another way I got the firestore document
this.TED = this.db.getDoc3().subscribe((doc) => this.TED = doc as Product);
-- this is inside a service
getDoc3() {
const ref = this.afs.collection("/Products").doc("test_product");
// return ref.get().subscribe((doc) => this.data = doc as Product);
return ref.get()
}
-- yet another way I got the data
getProduct2(id: string): Observable<Product> {
// const productsDocuments = this.afs.doc<Product>("Products/" + id);
const productsDocuments = this.afs.doc<Product>("Products/test_product");
return productsDocuments.snapshotChanges().pipe(
map((changes) => {
const data = changes.payload.data();
const id = changes.payload.id;
return { id, ...data as Product };
})
);
}
所有这些方法都可用于检索 observable,但我无法访问组件中的数据。
我的一些尝试将数据拖出可观察对象
// console.log(JSON.stringify(this.product as Product))
//console.log(JSON.parse(JSON.stringify(this.product)))
// this.productsService.getProducts().subscribe((data) => {
// this.products = data.map((e) => {
// return {
// id: e.payload.doc.id,
// ...e.payload.doc.data(),
// } as Product;
// });
// getInvoice() {
// var docref = this.afs.collection("/Products").doc(this.invoiceId);
// var docref = this.afs.collection("/Products").doc("test");
// docref.ref.get().then((doc) => {
// if (doc.exists) {
// var invoice = doc.data(); // <------WORKS
// this.invoice = doc.data(); <------DOESN'T WORK
// console.log("Invoice data: ", doc.data());
// } else {
// console.error("No matching invoice found");
// }
// });
// }
我试图传递我的数据的地方
this.galleryImages = [
{
small: this.product.image,
medium: this.product.image,
big: this.product.image,
},
NGX 图像库
<div>
<div class="Home">
<div class="content">
<ngx-gallery [options]="galleryOptions" [images]="galleryImages"></ngx-gallery>
</div>
</div>
</div>
任何帮助将不胜感激。谢谢你。如果您需要更多代码或说明,请告诉我。
解决方案
基本思想是尽可能使用流,理想情况下它们仅通过异步管道在模板中订阅。
因此,您可以使用第二个可观察流从产品中获取图像信息,并通过异步管道将其传递给图库。
product$ = getProduct2(id);
images$ = product$.pipe(map(product => [{
small: product.image,
medium: product.image,
big: product.image,
}]
));
在您的模板中:
<ngx-gallery [options]="galleryOptions" [images]="images$ | async"></ngx-gallery>
推荐阅读
- karate - 如何在我的 karate-config.js 中使用 karate.callSingle()?
- go - 在 k8s golang api 中观看并获取事件,但一段时间后不再获取任何事件
- symfony - symfony 学说 pdo odbc 驱动程序
- java - 蓝牙写功能不工作
- java - 在 Tomcat 中部署 jBPM 7.8.0 - 无法使用 tomcat 用户登录
- android - 如何共享使用毕加索从服务器加载的图像?
- java - 如何在可嵌入类中保留 java.lang.Object 类型字段
- django - is_valid 返回 true 后 Django 表单保存错误
- c++11 - 自动调用移动构造函数
- c++ - 覆盖 C++ 未按预期工作