typescript 从同步的可观测物获取数据,Angular

9o685dep  于 2023-03-19  发布在  TypeScript
关注(0)|答案(2)|浏览(118)

我正在尝试从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)"显示数据,但不起作用

x4shl7ld

x4shl7ld1#

您的console.log将返回undefined,因为它是在订阅完成之前执行的。另外,如果您已经订阅了,则不需要在html中使用async关键字。因此,您必须选择:

this.dataService.getProducts1().subscribe(response => {
    console.log(response); // return data
    this.products = response;
  });

  And in html:
  *ngFor="let item of products"

或者你可以在html中使用observable和async关键字:

products: Observable<IProduct[]>;

var products = this.dataService.getProducts();

  And in html:
  *ngFor="let item of (products | async)"

如果您需要更好地理解为什么setTimeout中有数据,那么请研究Angular中的Microtask和Makrotask以及它的执行顺序。

fkaflof6

fkaflof62#

你做得对!
唯一的问题是你怎么用它。
console.log(“产品:“,this.products)//返回未定义的
它应该返回undefined,因为您正在记录该值,但尚未设置。尽管您在subscribe方法中设置了products值,但请注意Observable异步运行,因此您不会得到该值
如果要检查this.products的值,则必须在subscribe回调内的以下代码之后记录该值

this.dataService.getProducts1().subscribe(response => {
    console.log(response); // return data
    this.products = response;
    console.log(this.products);
  })

我尝试在html *ngFor=“let item of(products)中显示数据|async)”但它不起作用
这是行不通的,因为您的products不是observable,而是您的数据的实际类型。

*ngFor="let item of products"

补充信息:
如果要在模板中使用async管道,则必须在组件中声明此管道

this.products = this.dataService.getProducts();

相关问题