如何在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>