如何在Angular中实现数据删除功能

Question

在我们网站的编辑页面中，我有一个垫卡/工作区列表，每个工作区的顶角都有编辑图标。通过单击该编辑图标，它会将您带到该工作区的编辑页面，并且我在其中有一个删除按钮，当它单击时会显示一个对话框，并允许用户决定他们是否真的要删除该工作区。

不太确定如何处理 API 调用

 .name.length > 0 && this.description.length > 0) {
      //map
      this.workspace.name = this.name;
      this.workspace.description = this.description;
      this.workspace.type = WorkspaceType.public; //all workspaces that are created are public by default

      //create
      this.workspaceService.createWorkspace(this.workspace).subscribe(workspace => {
        this.saving = false;
        this.gotoManage();
        this.snackbar.open(this.workspace.name+ " has been created!!", "", {duration :2500});
      }, () => this.saving = false);

    }
  }

Answer 1

你可以这样做：

openModalConfirmationDialog(content1: TemplateRef<any>, row, content2:TemplateRef<any>, content3: TemplateRef<any>) {
// you can store row or data selected until page is active
  this.contetntIWantToDelete = row;
// Make availale data in popup for confirmation
    this.modalService.open(content1).then(result => {
        if (result) {
        // load the data (row) which is to be deleted
            this.modalService.open(content2);
        // update delete
     this.yourDeleteinfoAPIcustomFunction('/name1/requestedWorkspaceDelete', row.id, content3);
        }
    });
}

yourDeleteinfoAPIcustomFunction(url, param, content1: TemplateRef<any>) { 
// This function have success and error messages based on what is selected for deletion
 this.http.get(baseUrl + url, options)
        .subscribe(r => {
                if (r != null) {
                   // success delete operation
                } else {
                    // failed delete op.
                }
            }

}

在您的 html 中删除按钮：

(click)="openModalConfirmationDialog(modalConfirm, row, modalDeleteProgress, modalDeleteSuccess)"

在上面的函数中：我有这组在函数中传递的对话框，正如你提到的，你想从对话框中得到确认：

<ng-template #modalConfirm>
    <custom-directive>
        <p>Confirm delete operation</p>
        <p>Delete workspace Id: <B>{{workspace.id}}
            <br></B><B>{{moreDetails}}</B>
    </custom-directive>
</ng-template>

<ng-template #modalDeleteProgress>
    <custom-directive type="warning" warningTitle="Delete in progress">
    </custom-directive>
</ng-template>

 <ng-template #modalDeleteSuccess>
    <custom-directive type="success" successTitle="Success" btn="Close">
        <div>workspace ID: {{workspace.id}} has been deleted</div>
    </custom-directive>
</ng-template>