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 => ...)，它不会显示任何内容，因为数组为空。我认为这是因为数据是异步的（就像Chrome控制台的控制台说我在i图标中一样）＆＃34;这个值刚刚评估了＃34;但为什么我可以使用ngFor在html中显示，但无法获取.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);
}

Answer 2

我已通过在订阅后再次重新分配对象来进行修复，即

this.prodoctous = this.prodoctous.splice（0，this.prodoctous.length）

由于＆＃34;无法获得数据，因此刚刚评估了以下数值＆＃34;

2 个答案: