我正在尝试从observable中获取数据。在subscribe()
方法中我可以访问这些数据。但是将响应传输到全局变量不起作用。我该怎么做呢?
服务:
getProducts():Observable<IProduct[]>{
return <Observable<IProduct[]>> this.db.collection('products').valueChanges();
}
组件:
products!: IProduct[];
constructor(private dataService: DataService){}
ngOnInit(): void {
this.dataService.getProducts().subscribe(response => {
console.log(response); // return data
this.products = response;
})
console.log("products: ", this.products) // return undefined
setTimeout(() => {
console.log("products: ", this.products) // return data
},1000)
}
我尝试以html *ngFor="let item of (products | async)"
显示数据,但不起作用
2条答案
按热度按时间x4shl7ld1#
您的console.log将返回undefined,因为它是在订阅完成之前执行的。另外,如果您已经订阅了,则不需要在html中使用async关键字。因此,您必须选择:
或者你可以在html中使用observable和async关键字:
如果您需要更好地理解为什么setTimeout中有数据,那么请研究Angular中的Microtask和Makrotask以及它的执行顺序。
fkaflof62#
你做得对!
唯一的问题是你怎么用它。
console.log(“产品:“,this.products)//返回未定义的
它应该返回
undefined
,因为您正在记录该值,但尚未设置。尽管您在subscribe
方法中设置了products值,但请注意Observable异步运行,因此您不会得到该值如果要检查
this.products
的值,则必须在subscribe
回调内的以下代码之后记录该值我尝试在html *ngFor=“let item of(products)中显示数据|async)”但它不起作用
这是行不通的,因为您的
products
不是observable
,而是您的数据的实际类型。补充信息:
如果要在模板中使用
async
管道,则必须在组件中声明此管道