angular - 在primeNG中使用toast确认删除记录

Question

我在我的 Angular 项目中使用primeNG，在表格中每一行都有一个删除按钮来显示确认框(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)

      } 

那么如何将相同的参数传递给onConfirm方法？

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

Answer 1

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

 `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;
                 }`