web-dev-qa-db-fra.com

Impossible d'obtenir les données en raison de "La valeur ci-dessous a été évaluée tout à l'heure"

Eh bien, j'ai passé beaucoup de temps à chercher de l'aide pour résoudre ce problème, mais rien ne fonctionnait pour moi. Je reçois un tableau d'objets de mon fournisseur:

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

En console, cela montre:

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

Si j'essaie this.produtos.forEach(produto => ...), cela ne me montre rien, car le tableau est vide. Je pense que c'est parce que les données sont extraites de manière asynchrone et (comme le dit la console de Chrome lorsque je clique sur l'icône i) "la valeur a été évaluée tout à l'heure", mais pourquoi je peux afficher en HTML à l'aide de ngFor mais je ne peux pas récupérer les données le fichier .ts?

angulartypescriptionic-frameworkobservable
4
Victor de Almeida

C'est juste une question de timing. Lorsque la page s’affiche pour la première fois, les données ne sont pas là et le ngFor ne fait rien. Plus tard, lorsque les données arrivent, la détection de changement Angular détecte que les données sont maintenant disponibles et est mise à jour ... en réexécutant le ngFor et cela fonctionne.

Vous ne montrez pas où le forEach est exécuté dans le code ... mais je suppose que c'est avant que les données ne soient récupérées. C'est pourquoi c'est vide.

Essayez de déplacer ce code dans dans la subscribe.

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

De cette façon, le code ne fonctionnera pas tant que après les données ne seront pas récupérées.

Je l'ai essayé dans mon code comme ceci:

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

J'ai corrigé en réaffectant l'objet après l'abonnement, c'est-à-dire.

this.prodoctous = this.prodoctous.splice (0, this.prodoctous.length)

0
Sachin Mishra