Je peux imprimer le tableau dans la console mais je ne peux pas obtenir la longueur et je ne peux pas accéder au premier élément
Je travaille sur un projet, je rencontre ce problème, où je peux imprimer le tableau dans console mais je ne peux pas obtenir la longueur et je ne peux pas accéder au premier élément également.
code:
checkout.component.ts:
getCheckoutBooks(): Checkout2[] {
console.log('hey hello');
this.booksInCheckout1 = [];
this.booksInCheckout2 = [];
this.userID = +localStorage.getItem('id');
this.userService.getUserById(this.userID).subscribe(user => {
this.booksInCheckout1 = user.checkout;
for (let i = 0; i < this.booksInCheckout1.length; i++) {
this.bookService
.getBook(this.booksInCheckout1[i].bookId)
.subscribe(book => {
this.daysRemaining = Math.ceil(
Math.abs(
new Date(
this.booksInCheckout1[i].endDate
).getTime() - this.today.getTime()
) / this.ONEDAY
);
this.booksInCheckout2.push(
new Checkout2(
book,
new Date(
this.booksInCheckout1[i].startDate
).getMonth() +
1 +
'/' +
new Date(
this.booksInCheckout1[i].startDate
).getDate() +
'/' +
new Date(
this.booksInCheckout1[i].startDate
).getFullYear(),
new Date(
this.booksInCheckout1[i].endDate
).getMonth() +
1 +
'/' +
new Date(
this.booksInCheckout1[i].endDate
).getDate() +
'/' +
new Date(
this.booksInCheckout1[i].endDate
).getFullYear(),
this.booksInCheckout1[i].status,
this.daysRemaining
)
);
});
}
console.log(this.booksInCheckout2.length);
});
return this.booksInCheckout2;
}
3 Réponses :
La raison est - Parce que votre méthode this.checkoutService.getCheckoutBooks () est de nature asynchrone et que vous essayez de console avant que les données ne soient réellement récupérées.
this.booksInCheckout = this.checkoutService.getCheckoutBooks();// Async Call
Pour résoudre ce problème, utilisez subscribe pour traiter l'appel asynchrone ou vous pouvez utiliser la console dans la méthode getCheckoutBooks ou peut-être async dans le modèle côté aussi.
Vous appelez des services asynchrones qui n'attendent pas votre réponse. donc, votre prochaine instruction est exécutée en premier.
Donc, si vous utilisez ToPromise, utilisez , alors:
this.checkoutService.getCheckoutBooks().then(res=> { this.booksInCheckout = res; console.log(this.booksInCheckout)});
ou vous pouvez utilisez await pour continuer à attendre la réponse:
this.booksInCheckout = attendez this.checkoutService.getCheckoutBooks ();
Cela se produit parce que vous n'attendez pas le service. Ce qui se passe, c'est que les données ne proviennent pas du serveur et que la console enregistre sa valeur.
ngOnInit() {
this.checkoutService.getCheckoutBooks().subscribe((booksInCheckout)=>{
console.log(booksInCheckout); // for array
console.log(booksInCheckout.length); // for length of array
console.log(booksInCheckout[0]); // for first element
});
}
utilisez l'une des implémentations de fonction mentionnées ci-dessous pour votre service.
//code for service
function getCheckoutBooks(){
return http.get();
}
async function getCheckoutBooks(){
const booksData : any = await http.get();
return booksData;
}
Le code suivant devrait fonctionner.
let fetchData=async (params:any)=>{
this.booksInCheckout = await this.checkoutService.getCheckoutBooks();// getting array value service
//other code here
}
async function fetchData( params:any)=>{
this.booksInCheckout = await this.checkoutService.getCheckoutBooks();// getting array value service
//other code here
}
Vous êtes confronté à ce problème parce que vous appelez une fonction asynchrone mais en raison de la nature asynchrone du javascript, le code sous la fonction est exécuté avant la fin de la tâche asynchrone.
J'ai donc ajouté ici un rappel pour la tâche asynchrone. J'espère que ça aide :)
Salut Sagar, Merci pour votre réponse. Mais, quand j'essaye ça. J'obtiens l'erreur «Attendre l'expression n'est autorisée que dans une fonction asynchrone». Si je rend la fonction asynchrone, le problème persiste également.
Vous devez également affecter vos services en tant qu'attente asynchrone
modifiez votre service selon l'une des implémentations ci-dessus. Comme vous n'avez pas affiché le code de votre service, j'ai publié sur la base de mes hypothèses. Si le code ci-dessus n'aide pas. veuillez poster le code de votre CheckoutService.
Merci Sagar pour votre réponse, j'ai mis à jour mon code et je n'ai pas pu comprendre ce qui n'allait pas, veuillez jeter un œil.
Dans la capture d'écran, la console affiche la longueur 12. Quel est le problème?
Dans la ligne suivante, la longueur est 0.
J'étais nouveau dans le comportement asynchrone, dans mon service, je devrais retourner le tableau à l'intérieur de subscribe. Toutes les réponses mentionnées ci-dessous sont valides. Merci tout le monde.