在 primeNG 中使用确认按摩时删除相同的选定行

Question

在我的 angular 项目中，通过使用 primeNg table 我想在确认后删除行，所以每一行都有一个删除按钮，当点击它时会显示确认消息，但是当点击确认按钮时出现问题 table 删除了最后一行，而不是选择了同一行。

这是我的 HTML :

 <button class="btn btn-danger" (click)="showConfirm()"><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(rowData.id)" label="yes" class="ui-button-success"></button>
            </div>
            <div class="ui-g-6">
                <button type="button" pButton (click)="onReject()" label="No" class="ui-button-secondary"></button>
            </div>
        </div>
    </ng-template>
</p-toast>

在components.ts中我使用了这个方法：

  showConfirm() { // to show confirm massage
    this.messageService.add({key: 'c', sticky: true, severity:'warn', summary:'!Delete confirm', detail:'Are you shur to dlelete this client '});
  }

 onConfirm(id:Clients) {
    this.Service.deleteClient(id).subscribe(res => {})

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

primeNg参考资料：[https://www.primefaces.org/primeng/#/toast]

更新

当我尝试将参数 rowData.id 放入 HTML 和 components.ts[= 的 showConfirm 方法中时46=] showConfirm(id:Clients) 并在显示所选行的详细信息中使用连接，

HTML

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

components.ts

showConfirm(id:Clients) { // to show confirm massage this.messageService.add({key: 'c', sticky: true, severity:'warn', summary:'!Delete confirm', detail:'Are you shur to dlelete this client '+id}); }

但我不知道如何将相同的参数从 showConfirm(id:Clients) 传递到 onConfirm() 方法。

Answer 1

嗯，不知道我说的对不对。但我会这样做的方式是：

1-decalre 像 deleteCandidate 这样的变量。

2-在 showConfirm 方法上更新它。

showConfirm(id:Clients) { // to show confirm massage
this.deleteCandidate=id;
    this.messageService.add({key: 'c', sticky: true, severity:'warn', summary:'!Delete confirm', detail:'Are you shur to dlelete this client '+id});
  }

3-传递给onConfirm。

 onConfirm(id:Clients)<--this parameter is useless
 {
        this.Service.deleteClient(this.deleteCandidate).subscribe(res => {})

Answer 2

另一种方法是使用 'Confirm Dialog' 的 primeng。
Documentation of Primeng ConfirmDialog

在 primeNG 中使用确认按摩时删除相同的选定行

delete the same selected row when use confirm massage in primeNG

typescript

primeng

angular