时间戳

首页 > 解决方案 > 如何在 Angular 中实现删除功能

html - 如何在 Angular 中实现删除功能

问题描述

我在 Angular 组项目中，我正在尝试为当前工作区实现删除功能，但我不知道该怎么做。关于如何做到这一点的任何建议或帮助？

在 add-workspace.HTML 文件中，我有一个显示对话框的按钮（delete-workspace-dialog）。

在 delete-workspace-dialog 组件文件中，有一个删除按钮。我正在尝试使用该按钮删除当前工作区。

在 delete-workspace.dialog.ts 文件中又名删除对话框

export class DeleteWorkspaceDialogComponent implements OnInit {

  constructor(
    public dialogRef: MatDialogRef<DeleteWorkspaceDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any) { }

  ngOnInit(): void {
  }
  onNoClick(): void {
    this.dialogRef.close();
  }

  onDeleteClick(): void{
    // Delete workspace here

  }


}

我正在尝试使用“是，删除它”按钮来删除当前工作区

标签： htmlangularangular-materialworkspacemat-card

解决方案

希望下面的片段可能会有所帮助：

在删除弹出组件中：

import { WorkspaceService } from 'src/app/core/services/workspace.service';
export class DeleteWorkspaceDialogComponent implements OnInit {
constructor(
 public dialogRef: MatDialogRef<DeleteWorkspaceDialogComponent>,
 @Inject(MAT_DIALOG_DATA) public data: any,
 private workspaceService: WorkspaceService) { }
ngOnInit(): void {
}
onNoClick(): void {
  this.dialogRef.close();
}
onDeleteClick(): void{
  // Delete workspace here
  this.workspaceService.deleteWorkspace(data.workspace).subscribe(response=>{
    // Do some logic and close the popup
    this.dialogRef.close();
  },error=>{
   // Error handling and close the popup
   this.dialogRef.close();
  })
 }
}

从父组件打开删除弹出窗口：

HTML：

<button (click)="delete()">Delete</button>

TS：

delete(){
 this.dialog.open(DeleteWorkspaceDialogComponent,{
    data: {
        workspace: this.workspace
    }
 });
}

在这里，您传递要删除的工作空间，在删除弹出窗口中，您正在调用服务以删除工作空间。

希望它会有所帮助。

推荐阅读