web-dev-qa-db-fra.com

Actualiser le composant après la mise à jour de la base de données dans Angular 5

J'ai un composant parent avec route/home qui contient une liste et quand un élément de la liste est cliqué, je navigue vers/home/edit/listid et met à jour la base de données. Après la mise à jour de la base de données, je retourne à/home. Mais la liste n'est pas mise à jour jusqu'à ce que j'actualise la page manuellement. J'ai aussi essayé d'appeler dataservice.getList () après la mise à jour de la base de données, mais pas de chance . Voici mon code. Quelqu'un peut-il m'aider s'il vous plaît à identifier ce qui me manque?

Composant Home 

ngOnInit() {
    this.loadList();
  }
  loadList() {
    this.dataservice.getList().subscribe(
      res => {
        this.List= res;
      },
      err => {
        console.log('Error Occoured');
        console.log(err);
      }
    );
  }

DataService getList () 

getList(): Observable<any[]> {
    return this.http.post<any[]>('https://resturl/Prod/getdata', {
      'operation': 'getData'
      }
    });
  }

Liste d'édition 

this.dataservice.updateList().subscribe(
        updateAccRes => {
            this.dataservice.getList();
            this.router.navigate(['/home']);
          }
        },
        error2 => {
          console.log(error2);
        }
      );
angularcomponentsrefresh
5
Prasad Domala

JavaScript est asyn est votre problème. Lorsque vous accédez à Accueil, la réponse de la liste mise à jour n'a pas encore été renvoyée. Vous devez donc recharger manuellement la page. Une solution à cela consiste à avoir une variable commune dans le service accessible aux deux composants et à * ngIf dans le code HTML de votre composant domestique pour rechercher les mises à jour de la variable commune. 

Edit List Il vous suffit de mettre à jour les éléments ici. La navigation doit être appelée à l'intérieur de this.dataservice.getList () pour s'assurer qu'elle attend la réponse de l'appel getList ().

this.dataservice.updateList().subscribe(
    updateAccRes => {
        this.dataservice.getList();
      }
    },
    error2 => {
      console.log(error2);
    }
  );

DataService getList () Créez une variable commune ici, mettez-la à jour avec la réponse de getList (), puis accédez à/home 

latestList: any;
getList(): Observable<any[]> {
    return this.http.post<any[]>('https://resturl/Prod/getdata', 
        {'operation': 'getData'})
        .subscribe(response => {
             this.latestList = response.list;
             this.router.navigate(['/home']);
        },
        error => {
            console.log(error);
        }
)};

Composant Accueil Maintenant, après le retour de la liste mise à jour, nous sommes dirigés vers page d'accueil , et la liste mise à jour est prête à être affichée sans recharger manuellement la page. 

listOfItems: any
constructure(private dataService : DataService){
    // latestList is accessible here because it is a property of DataService
    this.listOfItems = this.dataService.latestList;
};

home.component.html Vous pouvez vérifier l'existence de la liste mise à jour ici. S'il existe, montrez-le. S'il n'existe pas, affichez le message "loading ....".

<div class="list" *ngIf="listOfItems"> <!-- Display list here --> </div>
<div *ngIf="!listOfItems"> Loading.......... </div>
1
David Tram

Vous pouvez ajouter un service contenant la liste d'éléments, .__ Et dans votre composant edit-list, vous mettrez à jour l'élément dans le service . et dans edit-list-composant.

Exemple:

class ItemsService{ 
   list: Items[]; 

   getItemById(index){
       return list[index];
   } 
   updateItemById(item, index){
       this.list[index] = item;
   }
}


class EditListComponent{
   item:Item;
   index:number;
   ...
   this.item = this.itemsService.getItemById(index);

   updateBtnClick(){
         this.itemsService.updateItemById(item, index);
   }
}
0
Ester Or