IONIC Section 5 - 5.13 Debugging

Cliquez içi pour plus de vidéos disponibles sur notre chaine youtube !

Bonjour à tous, dans la vidéo précédente, nous avons réalisé un bouton de suppression, cependant on a pu s’apercevoir que lorsque nous cliquons sur celui-ci, cela supprime les éléments de la page concernant la recette, et non la recette en elle-même. Donc nous allons essayer de comprendre et de débugger le problème dans lequel nous sommes confrontés. Voici notre code, nous sommes dans la page « recipes.page.ts », nous retrouvons notre « ngOnInit », dont nous allons modifier son contenu par « console.log (‘LOADED RECIPES’); » et en dessous un autre «  console.log(this.recipes); »  c’est ici que nous ajoutons les recettes et, notre problème c’est que, comme son nom l’indique, « onInit », est appelé initialement. Cela signifie donc que cette page de départ, la page de recette, n’a jamais été supprimée. Pour le vérifier, incluons l’interface « onDestroy », qu’on va implémenter dans « export » et importer. Puis on va pouvoir ajouter en bas de page notre ngOnDestroy() { console.log(‘ngOnDestroy’); }. On va également ajouter au dessus « ionViewDidEnter () { console.log(‘ionViewDidEnter); } que nous n’avons pas besoin d’implémenter, et on va copier coller cette fonction, pour le remplacer par « ionViewWillEnter() ». On va également importer la fonctionnalité « ionWillLeave() » ainsi que « ionWillDidLeave() » et sans surprise, le “console.log” modifié. Nous avons donc ces points importants liés au cycle de vie, cela signifie que nous avons maintenant des emplacements pour charger nos données de manière à ce qu’elles soient toujours chargées lorsque cette page devient visible. Pour cela, nous pourrions utiliser « ionViewWillEnter » ou « DidEnter ». Par exemple ici, dans « ionViewWillEnter », on règle nos recette comme on le faisait auparavant dans notre « ngOnInit » avec « this.recipes = this.recipesService.getAllRecipes(); » et dans notre ngOninit, on peut modifier « loader recipes » par « ngOnInit » car nous ne mettons plus aucune recette à jour. Et maintenant, si on sauvegarde notre progression et qu’on recharge notre application, nous pouvons essayer de supprimer notre recette, et voilà, le résultat, nous avons supprimé notre recette, qui ne s’affiche plus dans la page d’accueil de notre application. Maintenant, nous pouvons améliorer notre fonctionnalité à l’aide d’une pop-up afin de confirmer l’annulation, si toutefois, l’utilisateur a cliqué par erreur. Mais avant cela, on va voir un peu plus en détail les fonctionnalités ajoutées avec quelques explications dans la prochaine vidéo.