Je travaille sur un spa construit à l'aide de l'angulaire 8, à la vue, j'ai une table dans laquelle j'affiche toutes les données du backend et de la boucle à travers elle à l'aide de la boucle NGFOR. Cela fonctionne bien. Sur le bouton Supprimer, j'ai écrit une logique dans laquelle lorsque l'utilisateur clique sur le bouton, il affiche l'utilisateur un message Le problème est lorsque le bouton est cliqué sur toutes les lignes ouvertes et affichez le message. Je ne veux que seul le message à être affiché sur le bouton qui a été cliqué et tous les boutons . show.component.html show.component.ts
5 Réponses :
Vous devez placer le bouton en dehors de la boucle ngFor, lorsque vous placez le bouton dans le ngFor, il est ouvert à plusieurs reprises.
Lorsque je le place en dehors de la boucle ngFor, il y aura un problème car je ne pourrai pas capturer l'identifiant de l'utilisateur spécifique à supprimer
Le problème est que vous recevez le message de confirmation avec un indicateur confirmdelete et il deviendra Vrai lorsque vous cliquerez sur le bouton Supprimer en dehors de votre plage. c'est-à-dire
<td>
<button class="btn btn-primary" (click)="edit(user.id)">Edit</button>
<button class="btn btn-danger" (click)="deleteUser(user.id)">Delete</button>
</td>
Par conséquent, lorsque l'indicateur est réglé sur True, le message de confirmation sera affiché sur toutes les lignes. Vous pouvez essayer d'utiliser la même fonctionnalité en remplaçant le message de confirmation par un composant d'alerte douce et en n'utilisant qu'un seul bouton pour supprimer l'utilisateur dans le modèle. Vous devez supprimer le code ci-dessous du modèle HTML pour le convertir en alerte douce dans le contrôleur.
<span *ngIf="confirmDelete">
<span> Are you sure you want to delete ?</span>
<button class="btn btn-danger" (click)="deleteUser(user.id)">Yes </button>
<button class="btn btn-primary" (click)="confirmDelete=false">No </button>
</span>
Donc, votre dernière ressemblerait à:
<button *ngIf="!confirmDelete" class="btn btn-danger" (click)="confirmDelete=true">Delete</button>
Donc, en cliquant sur ce bouton, à l'intérieur de votre composant, placez une douce alerte à partir de laquelle l'utilisateur confirmera s'il doit supprimer ou non.
Lien de référence pour le composant Sweet Alert: - https://www.npmjs.com/package/sweetalert2
p>
Merci, votre réponse a été utile mais elle n'a pas atteint mes objectifs
Qu'avez-vous changé? Comme ce qui n'est toujours pas réalisé?
Make confirmDelete un objet, avec des clés comme identifiants des utilisateurs et des valeurs booléennes. puis, dans le modèle, vérifiez (ou définissez) confirmDelete [user.id]:
let confirmDelete = {};
et dans le .ts:
<span *ngIf="confirmDelete[user.id]">
<span> Are you sure you want to delete ?</span>
<button class="btn btn-danger" (click)="deleteUser(user.id)">Yes</button>
<button class="btn btn-primary" (click)="confirmDelete[user.id] = false">
No
</button>
</span>
<button
*ngIf="!confirmDelete[user.id]"
class="btn btn-danger"
(click)="confirmDelete[user.id] = true"
>
Delete
</button>
p>
Vous pouvez utiliser l'objet user dans * ngFor pour afficher / masquer la confirmation de suppression. Au lieu de déclarer confirmDelete , vous devez utiliser user.confirmDelete comme suit:
<table class="table table-dark table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Age (Years)</th>
<th>Gender</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of userData">
<td>
{{ user.name}}
</td>
<td>
{{ user.age}}
</td>
<td>
{{ user.gender}}
</td>
<td>
<button class="btn btn-primary" (click)="edit(user.id)">Edit</button>
<span *ngIf="user.confirmDelete">
<span> Are you sure you want to delete ?</span>
<button class="btn btn-danger" (click)="deleteUser(user.id)">Yes </button>
<button class="btn btn-primary" (click)="user.confirmDelete=false">No </button>
</span>
<button *ngIf="!user.confirmDelete" class="btn btn-danger" (click)="user.confirmDelete=true">Delete</button>
</td>
</tr>
</tbody>
</table>
De cette manière, vous ne pouvez afficher qu'une seule ligne à une fois.
Merci, je suis un peu nouveau dans Angular, veuillez m'aider à ce sujet question
@Martin: Vous devez écrire une méthode qui sera appelée au clic du bouton. Cette méthode sera dans le fichier .ts. Une fois que vous avez cliqué sur le bouton, transmettez les informations avec cette méthode et attribuez et stockez ces informations à la variable de rappel et ouvrez la fenêtre contextuelle. Maintenant, sur l'action du bouton sur le popup, vous appelez simplement le rappel.