删除数据并导航到同一页面

Question

HTML内容：

<td>
 <a (click)="onDelete(item.id)">
 <i class="material-icons" style="font-weight:bold; font-style:inherit ;color: rgba(247, 37, 37, 0.884);">
 delete_outline
 </i>
 </a>
 </td>

对应的TS文件：

onDelete(id) {
  console.log(id);
  this.blogId = this.id;
  const status = window.confirm('Are you sure you want to delete this id?' + this.blogId);

  if (status) {
      this.blog.deleteBlog(this.blogId).subscribe((response) => {
          this.blogId = (Response);
          alert('Successfully deleted the id');
          this.route.navigate(['/admin/blogger']);
      }, (error) => {
          console.log(error);
      });
  } 

和服务文件：

deleteBlog(id: any) {
    return this.http.delete(this.mainUrl + '/blog/' + id);
}

当我尝试将id作为参数传递以删除某些记录时，我在控制台中收到一个未定义的错误。我不知道我在这里做错了。谢谢。

Answer 1

您没有将参数设置为this.blog

尝试这个

  onDelete(id) {
          console.log(id);
          this.blogId = id;
          const status = window.confirm('Are you sure you want to delete this id?' + this.blogId);

          if (status) {
              this.blog.deleteBlog(this.blogId).subscribe((response) => {
                  this.blogId = (Response);
                  alert('Successfully deleted the id');
                 // this.route.navigate(['/admin/blogger']);
                  this.route.navigateByUrl('/', {skipLocationChange: true}).then(()=>
                    this.route.navigate(['/admin/blogger']));
              }, (error) => {
                  console.log(error);
              });
          } 

Answer 2

html文件

    <td>
        <a (click)="handleDelete(blog.id)" class="delete" title="Delete"
        data-toggle="tooltip" style="cursor: pointer;"><i class="fa fa- 
   times-circle"> 
        </i></a>
    </td>    

component.ts文件

 handleDelete(id) {
    swal.fire(
        'Are you sure?',
        'You want to Delete Blog!',
        'question').then((result) => {
        if (result.value) {
            this.layoutService.showLoading();
            this.blogService.deleteBlog(id).subscribe((response) => {
                if (response.success === true) {
                    this.layoutService.hideLoading();
                    swal.fire(
                        'Success',
                        response.message,
                        'success').then(() => {
                        this.getAllBlog();
                    });
                }
            });
        }
      });
     }