service de confirmation primeng

Question

J'ai un composant qui utilise le service de confirmation, comme suit

@Component({ 
    moduleId: module.id, 
    templateUrl: 'account-list.component.html', 
    providers: [AccountService], 
    selector: 'account-list' 
})..... 

deleteAccount(Account: Account) { 
    this.confirmationService.confirm({ 
     header: 'Delete Confirmation', message: 'Are you sure that you want to delete this account?', 
     icon: 'fa fa-trash', 
     accept:() => { 
      this.AccountService.deleteAccount(Account.account_id).subscribe(
       res => { 
        let index: number = this.Accounts.findIndex(n => n.account_id === Account.mc_account_id); 
        if (~index) { 
         this.Accounts.splice(index, 1); 
        } 
        this.msgs.push({ severity: 'Info', summary: 'The account is deleted' }); 
       }, 
       err => { 
        this.msgs.push({ severity: 'Error', summary: err.message }); 
       } 
      ); 

     } 
    }); 
} 

Ce composant fonctionne bien comme autonome. Lorsque vous utilisez ce composant en tant que composant enfant, le service de confirmation est déclenché deux fois. C'est à dire. Lorsque je souhaite supprimer un objet, je dois cliquer plus d'une fois sur le bouton Accepter ou Rejeter.

J'utilise ce composant dans rowexpantion dans le composant de tableau de données comme suit:

<template let-parent pTemplate="rowexpansion"> 
     <div class="outer" *ngIf="parent"> 
      <div class="inner"> 
       <account-list [parentId]="parent.parent_id"> </account-list> 

      </div> 
     </div> 
    </template> 

Dans cet exemple, mon composant est utilisé pour afficher les détails des comptes pour un Datatable pour le composant parent, chaque fois que je développer une rangée de la table parent, alors je dois cliquer une fois de plus les boutons d'acceptation ou de rejet. Cordialement

Answer 1

Basé sur Docs primeng

clés: clé en option pour correspondre à la clé de l'objet de confirmation, nécessaires à l'utilisation lorsque l'arbre composant a plusieurs boîtes de dialogue de confirmation.

Depuis que je suis en utilisant un arbre de composant imbriqué, je devais ajouter une clé pour chaque service de confirmation comme suit dans le modèle html

<p-confirmDialog key="account"></p-confirmDialog> 

dans le code ts Je dois aussi préciser la clé comme suit:

this.confirmationService.confirm({ 
       header: 'Delete Confirmation', 
       key:'account';