Как реализовать функцию удаления данных в 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>