时间戳

首页 > 解决方案 > 无法在 Angular 中进行确认删除工作

angular - 无法在 Angular 中进行确认删除工作

问题描述

弹出确认框时尝试激活删除按钮，单击删除时应删除该行

我的删除功能如下，我将它复制到我的 popupcomponent ts 文件中：

deleteBilling(id: string) {
   this.billingservice.deleteBilling(id).subscribe(
  resp => {
    console.log(resp);
    this.displayBilling()
  },
  err => console.error(err));
  


 }

我在实际按钮的popupcomponent html文件中复制了相同的内容：

<button type="button" class="btn btn-secondary" (click)="deleteBilling(billing.id)">Confirm Deletion</button>

为什么它不起作用？如果我删除弹出确认我的删除功能有效

我正在尝试将弹出窗口链接到删除功能：

popupTest(id: string) {
this.popupService.dialogOpen('Are you sure you want to delete?')
  .afterClosed().subscribe(resp => {
    //console.log(resp)
    if (resp) {
     //this.popupComponent.deleteBilling(id)??
//this.deletebilling(id)??
    

    }
  });

标签： angular

解决方案

当你说“在你的 popupcomponent ts 中复制了 deleteBilling 函数”时，你是什么意思？

如果您为弹出窗口使用组件并且删除逻辑在父级中，则需要发出一个事件：

将此添加到您的 popup.component.ts：

@Output() deleteEvent

deleteBilling(billing.id): void {
  deleteEvent.emit(billing.id)
}

在父模板中：

<app-popup (deleteEvent)="deleteBilling($event)"></app-popup>

但是，我会考虑使用“模态”或对话框组件（实际弹出窗口）。这些通常在（父）组件中定义，因此不需要您向父组件发出事件。（角度引导和角度材料都是不错的选择。）

它们具有内置的所有功能，您应该能够找到很多关于它们的示例。

推荐阅读