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

【问题标题】：Deleting data and navigating to the same page删除数据并导航到同一页面
【发布时间】：2020-03-15 19:51:25
【问题描述】：

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 作为参数传递以删除某些记录时，控制台中出现未定义错误。我不知道我在这里做错了什么。提前致谢。

【问题讨论】：

标签： json angular typescript api angular6

【解决方案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);
              });
          }

【讨论】：

确实有帮助，但页面没有导航到我添加的路线。

【解决方案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();
                    });
                }
            });
        }
      });
     }

【讨论】：