时间戳

首页 > 解决方案 > 函数在第二次调用时被记录

angular - 函数在第二次调用时被记录

问题描述

当我第一次调用组件函数时 this.products 是未定义的。第二次通话后，我看到了正确的结果。

我也尝试使用 Observable 获得相同的结果。我检查了不同浏览器上的控制台日志。

//Service function
  getProducts()
  {
    return this.http.get<Product[]>(this.serverUrl + '/products').pipe(map(data => data));
  }


//Component function
  getProducts(){
    this.productService.getProducts().subscribe(data => (this.products = data));
    console.log(this.products);
  }

标签： angulartypescript

解决方案

您应该稍微修改一下您处理订阅的方式。

试试下面的。 

public getProducts(): void
{
    this.productService.getProducts().subscribe(data => 
    {
        this.products = data;
        console.log(this.products);
    });
  }

HTTP 调用是一个异步任务，因此您需要从订阅内部进行分配和日志记录，console.log();否则在 asycn 调用开始后立即运行。（Aysnc 需要一些未知的时间）。

推荐阅读