函数在第二次调用时被记录答案

【问题标题】：Function gets logged on second call函数在第二次调用时被记录
【发布时间】：2019-06-10 05:19:52
【问题描述】：

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

【问题讨论】：

console.log 在您获取数据之前被调用，这就是为什么您有 undefined 和实际产品的原因。将日志放入订阅应该可以解决问题

标签： angular typescript

【解决方案1】：

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

试试下面的。

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

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

【讨论】：

@Yamah - 换句话说，“getProducts()”进行异步调用，因此返回在收到值之前。除非你用回调“订阅”。正如 dince12 的解决方案正确地做的那样。他还将“console.log()”放在同一个回调中。
您的回答是（现在）100% 正确的。当我看到缺少“;”时，我只是畏缩。将它们关闭是合法的 JS - 但将它们包括在内是“良好做法”。恕我直言...
我 100% 同意，只是被忽略了，可能是因为我从问题中复制了它并将其隔开:-)