在 primeNG 中使用 toast confirm 删除记录

Delete record by using toast confirm in primeNG

我在我的angular项目中使用primeNG,在table中每一行都有一个删除按钮来显示确认框(toast)然后我需要在用户点击确认按钮后删除记录盒子,

我很抱歉,因为我对此真的很陌生,所以请原谅我的一些看似非常基本的问题。

在我的 HTML

<button class="btn btn-danger" (click)="showConfirm(rowData.id)"><span class="fa fa-trash"></span</button>

<p-toast position="center" key="c" (onClose)="onReject()" [modal]="true" [baseZIndex]="5000">
    <ng-template let-message pTemplate="message">
        <div style="text-align: center">
            <i class="pi pi-exclamation-triangle" style="font-size: 3em"></i>
            <h3>{{message.summary}}</h3>
            <p>{{message.detail}}</p>
        </div>
        <div class="ui-g ui-fluid">
            <div class="ui-g-6">
                <button type="button" pButton (click)="onConfirm()" label="confirm" class="ui-button-success"></button>
            </div>
            <div class="ui-g-6">
                <button type="button" pButton (click)="onReject()" label="calcel" class="ui-button-secondary"></button>
            </div>
        </div>
    </ng-template>
</p-toast>`enter code here`

这是我在 compontent.ts

中的代码
... 
showConfirm(id:Clients) {
    this.messageService.add({key: 'c', sticky: true, severity:'warn', summary:'!تأكيد الحذف', detail:'هل تريد حذف هذا العميل؟'});}

onConfirm() {
// Here i need to delete the same record 

}
onReject() {
    this.messageService.clear('c');
}

我的service.ts

clientsUrl="http://localhost:4200/api/clints"

deleteClient(id){
    return this.http.delete(this.clientsUrl + "/" + id)

      } 

so如何将相同的参数传递给onConfirm方法?

或者最好的处理方法是什么?

您可以在确认方法中执行此操作

 `service.deleteClient(id).then((response: any) => {
         if (response.responseStatusId === 1) {
               //response.responseStatusId can be different
               //your toast method
                 }
                }`

在您的服务中:

`deleteClient(id){
  const promise = new Promise((resolve,reject) => {
   return this.http.delete(this.clientsUrl + "/" + id).then((data: any) => {
     if (data) {
       resolve(data);
         } else{
            reject({});
            }
            }).catch((error:any) => {
               reject(error);
                });}
                 return promise;
                 }`