0
votes

Comment rafraîchir automatiquement les données lors de la suppression angulaire

J'ai des données utilisateur dans une liste et je viens de mettre en œuvre la suppression de l'appel d'API pour l'utilisateur sélectionné, mais une raison quelconque ma liste ne met pas à jour immédiatement et je dois actualiser le navigateur afin de voir les modifications que j'ai apportées. Je suis nouveau à l'angulaire, je vais donc vraiment apprécier si je peux obtenir une suggestion ou une aide.

J'ai essayé cet exemple YouTube https://www.youtube.com/ Surveillez? V = DVNZECFYG0S & T = 10S Mais une raison de la raison ne fonctionne pas encore. P>

Workspace.Service.ts P>

  ngOnInit(): void {

  }

  deleteSelectedUsers() {
    if (this.selection.selected.length > 0) {
      const users = this.selection.selected.map(item => {
        return item.gmid;
      });
      this.workspaceService.removeUsersFromWorkspace(this.wsGuid, users).subscribe(response => {
        console.log("success!");
      }, error => {
        console.log("failed!");
      })
      this.snackbar.open('Selected user(s) have been deleted', '', {duration: 2000});
    }
  }


7 commentaires

Dans ce tutoriel, il utilise EventMitter pour notifier les modifications apportées à DOM . Je pense que c'est ce que vous avez oublié de mettre en œuvre.


Est-ce là.wsguid l'identifiant de l'utilisateur veut-il supprimer?


@Noahlc ... Oui, j'ai téléchargé le code complet de ce composant ici, donc par Anychance Pouvez-vous jeter un coup d'œil à cela. Merci Stackblitz.com/edit/angular-ivy-zapzz5


@Kirubel désolé. regardé beaucoup de tutoriel si accidentellement attaché le mauvais lien. Je viens de mettre à jour et c'est celui que j'ai essayé de suivre mais je ne travaille toujours pas.


@Kirubel Il y a un problème sur le projet.


@Aasezi Votre Stackblitz ne fonctionne pas, mais vous ne pouvez pas supprimer les utilisateurs de la matrice dans GURECUtilisersComponent car il s'agit d'une variable d'entrée d'un composant parent. Créer un @Output () Émetteur d'événement qui notifie le composant parent que les utilisateurs à supprimer, le parent définit la demande, abonna au résultat et supprime les utilisateurs sur le succès. Si vous réaffectez les utilisateurs de la composante parent, la détection des modifications des angulaires propagera automatiquement les modifications apportées à votre composant enfant.


@Fussel salut, merci quelques conseils, mais gourou CSE m'a fourni ce code cela.datasource.data = this.Users.filter (id => this.wsguid! = This.wsguid); Et cela fonctionne, mais une raison quelconque de mon article non sélectionné disparaît également avec l'élément sélectionné et ne se présente que lorsque j'ai rafraîchi la page. Par hasard, ce qui va et comment résoudre ce problème. Je veux juste que l'élément sélectionné disparaisse. Merci


3 Réponses :


0
votes

Vous avez manqué sur la chose ici. xxx


1 commentaires

Bonjour Merci pour quelques conseils, mais je ne suis toujours pas sûr de la manière de le mettre en œuvre par Anychance Pouvez-vous jeter un coup d'œil au code complet de Stackblitz et m'aider à la mettre en œuvre. Merci Stackblitz.com/edit/angular-ivy-zapzz5



0
votes

du code ci-dessus échantillon

ici, les données sont chargées pour votre table p> xxx pré>

} p>

ici, un utilisateur est supprimé de la DB

     this.workspaceService.removeUsersFromWorkspace(this.wsGuid, users).subscribe(response => {
        console.log("success!");
        // assuming this.users is an array 
        this.dataSource.data = this.users.filter(id => id != this.wsGuid);
        // assign updated array with deleted user to the data source
      }, error => {
        console.log("failed!");
      })

}


2 commentaires

Merci gurucse de me fournir cela, mais savez-vous pourquoi je reçois une erreur sur id! = This.wsguid. Cela disant cela "Cette condition reviendra toujours" vraie "puisque les types" WorkspacaSuer "et" chaîne "n'ont pas de chevauchement.". Je ne suis pas vraiment sûr de quoi faire.


Si j'ai changé cela à ID => Ceci.wsguid! = Ceci.wsguid, alors il fonctionne, mais toutes les données non sélectionnées disparaissent également avec l'élément sélectionné et ne se présentent que après que je rafraîchis le navigateur. (L'élément que j'ai sélectionné est supprimé)



0
votes

Je n'ai pas compris exactement la fonction, mais si vous avez besoin de rafraîchir la liste des utilisateurs, vous devez le faire manuellement, voici une petite aide.

deleteSelectedUsers() {
    if (this.selection.selected.length > 0) {
      const users = this.selection.selected.map(item => {
        return item.gmid;
      });
      this.workspaceService.removeUsersFromWorkspace(this.wsGuid, users).subscribe(response => {
        // filter by ID
        this.users = this.users.filter(user => !users.find(u => u.id === user.id)); // is better to filter by user ID
        console.log("success!");
      }, error => {
        console.log("failed!");
      })
      this.snackbar.open('Selected user(s) have been deleted', '', {duration: 2000});
    }
  }


2 commentaires

Bonjour Noé, merci de m'avoir donné cela malheureusement cela ne fonctionne toujours pas. J'ai essayé ceci ceci.datasource.data = this.utilisateur.filter (id => this.wsguid! = This.wsguid); Et cela fonctionne, mais une raison quelconque de mon article non sélectionné disparaît également avec l'élément sélectionné mais ne se présente à nouveau que lorsque j'ai rafraîchi la page (l'élément sélectionné ne s'affiche plus après l'actualisation). Par hasard, ce qui va et comment résoudre ce problème. Je veux juste que l'élément sélectionné disparaisse. Merci


Pouvez-vous me dire ce qui est-ce.wsguid et les utilisateurs que vous donnez à RemoveUserSRromworkworkspace.