由于“下面的值刚刚被评估”而无法获取数据

Question

好吧，我花了很多时间为这个问题寻求帮助，但没有任何帮助。我从提供商那里得到了一个对象数组：

this.encarteProvider.getProdutosEncarte('encarte1').subscribe(prods => {
    this.produtos = prods;
    console.log(this.produtos);
});

在控制台中，它显示：

[]
0: Produto
1: Produto
2: Produto
length: 3
__proto__: Array(0)

如果我尝试this.produtos.forEach(produto => ...)，它不会显示任何内容，因为Array为空。我认为这是因为数据是异步获取的（例如，当我单击i图标时Chrome的控制台说），“该值现在才被求值”，但是为什么我可以使用html显示ngFor但不能在其中显示数据。 ts文件？

Answer 1

这只是一个时间问题。当页面首次显示时，数据不存在，因此 ngFor 不执行任何操作。稍后，当数据到达时，Angular 更改检测发现数据现在可用并更新......重新执行 ngFor 并且它可以工作。

您没有显示 forEach 在代码中执行的位置...但我的猜测是它是在检索数据之前。这就是为什么它是空的。

尝试将该代码移动到.subscribe

this.encarteProvider.getProdutosEncarte('encarte1').subscribe(prods => {
    this.produtos = prods;
    console.log(this.produtos);
    this.produtos.forEach(produto => ...);
});

这样，直到检索到数据后代码才会运行。

我在我的代码中尝试过，如下所示：

ngOnInit(): void {
    this._productService.getProducts()
            .subscribe(products => {
                this.products = products;
                this.products.forEach(product => console.log(JSON.stringify(product)));
            },
                error => this.errorMessage = <any>error);
}