如何在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&nbsp; this.contetntIWantToDelete = row;// Make availale data in popup for confirmation&nbsp; &nbsp; this.modalService.open(content1).then(result => {&nbsp; &nbsp; &nbsp; &nbsp; if (result) {&nbsp; &nbsp; &nbsp; &nbsp; // load the data (row) which is to be deleted&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.modalService.open(content2);&nbsp; &nbsp; &nbsp; &nbsp; // update delete&nbsp; &nbsp; &nbsp;this.yourDeleteinfoAPIcustomFunction('/name1/requestedWorkspaceDelete', row.id, content3);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });}yourDeleteinfoAPIcustomFunction(url, param, content1: TemplateRef<any>) {&nbsp;// This function have success and error messages based on what is selected for deletion&nbsp;this.http.get(baseUrl + url, options)&nbsp; &nbsp; &nbsp; &nbsp; .subscribe(r => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (r != null) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// success delete operation&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // failed delete op.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}在您的 html 删除按钮中：(click)="openModalConfirmationDialog(modalConfirm, row, modalDeleteProgress, modalDeleteSuccess)"在上面的函数中：我有一组在函数中传递的对话框，正如您提到的您想从对话框中获得确认：<ng-template #modalConfirm>&nbsp; &nbsp; <custom-directive>&nbsp; &nbsp; &nbsp; &nbsp; <p>Confirm delete operation</p>&nbsp; &nbsp; &nbsp; &nbsp; <p>Delete workspace Id: <B>{{workspace.id}}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br></B><B>{{moreDetails}}</B>&nbsp; &nbsp; </custom-directive></ng-template><ng-template #modalDeleteProgress>&nbsp; &nbsp; <custom-directive type="warning" warningTitle="Delete in progress">&nbsp; &nbsp; </custom-directive></ng-template>&nbsp;<ng-template #modalDeleteSuccess>&nbsp; &nbsp; <custom-directive type="success" successTitle="Success" btn="Close">&nbsp; &nbsp; &nbsp; &nbsp; <div>workspace ID: {{workspace.id}} has been deleted</div>&nbsp; &nbsp; </custom-directive></ng-template>