Question

当我第一次调用组件函数时，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);
  }

Answer 1

您应该稍微修改订阅的方式。

尝试以下方法。

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

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

函数在第二次调用时被登录

1 个答案: