html - Jag får fler än en bekräftelsedialogruta i primeng

Jag försöker implementera en bekräftelsedialog med hjälp av primeng i min Angular-webbapplikation. När jag klickar på knappen som ska anropa metoden får jag dialogrutan två gånger.

Jag satte en console log för att kontrollera om metoden kallas två gånger, visar sig att den kallas en gång vid klick. Nedan är koden.

HTML :

<div class="card">
<p>{{eachsecret.title}}</p>
<p>{{eachsecret.date}}</p>
<div class="container">
<i class="pi pi-eye"></i>&nbsp;
<i class="pi pi-download" (click)="download(eachsecret.sid)"></i>&nbsp;
<i class="pi pi-pencil"></i>&nbsp;
<p-confirmDialog [style]="{width: '50vw'}" [baseZIndex]="10000" rejectButtonStyleClass="p-button-text"></p-confirmDialog>
<i class="pi pi-trash" (click)="delete(eachsecret.sid)"></i>&nbsp;
</div>
</div>

Radera metod :

delete(sid) {
      console.log("confirmation dialogue method called");
      this.confirmationService.confirm({
      message: 'Are you sure that you want to proceed?',
      header: 'Confirmation',
      icon: 'pi pi-exclamation-triangle',
      accept: () => {
        this.httpClient.delete(environment.baseURL+'/secret/'+sid, { observe: 'response'}).subscribe(data => {});
        this.messageService.add({severity:'info', summary:'Confirmed', detail:'You have accepted'});},
      reject: () => {this.messageService.add({severity:'error', summary:'Rejected', detail:'You have rejected'});}
      });
  }

Svar #1

Tilldela en knapp för både att bekräfta metodanrop och HTML-kod.

HTML :

<p-confirmDialog [style]="{width: '50vw'}" [baseZIndex]="10000" rejectButtonStyleClass="p-button-text" key="myDialog"></p-confirmDialog>

TS :

this.confirmationService.confirm({
      message: 'Are you sure that you want to proceed?',
      header: 'Confirmation',
      icon: 'pi pi-exclamation-triangle',
      accept: () => {
        this.httpClient.delete(environment.baseURL+'/secret/'+sid, { observe: 'response'}).subscribe(data => {});
        this.messageService.add({severity:'info', summary:'Confirmed', detail:'You have accepted'});},
      reject: () => {this.messageService.add({severity:'error', summary:'Rejected', detail:'You have rejected'});},
      key: "myDialog"
      });