单击角度中的删除按钮时页面未刷新答案

【问题标题】：Page not refreshed when clicked delete button in angular单击角度中的删除按钮时页面未刷新
【发布时间】：2019-04-15 21:20:00
【问题描述】：

我有一个在“http://localhost:4200/assignmentForAudit”运行的页面，用户界面看起来像

当我单击删除按钮时，数据被删除但页面没有刷新。我尝试在删除操作后放置this.router.navigate(['/assignmentForAudit']);，但它没有刷新页面。我怎样才能实现这种刷新方法以便删除数据？

component.ts中的删除方法

onDelete(nas:any){
   this.assignmentAudit.id=nas.assignmentAudit[0].id;
   console.log(this.assignmentAudit.id);
  if(window.confirm('Are sure you want to delete this item ?')){
     this.assignmentAuditService.deleteGroupFromSelection(this.assignmentAudit.id)
      .subscribe(
        data => {
          console.log(data);
        },
        error => console.log(error));
   }
    this.router.navigate(['/assignmentForAudit']);

}

assignment-audit.service.ts类方法调用api操作

deleteGroupFromSelection(id: number): Observable<any> {
    return this.http.delete(`${this.baseUrl}/${id}`, { responseType: 'text' });
  }

删除操作正常，但问题是页面没有刷新。

【问题讨论】：

window.location.reload(); 应该可以工作，但它确实完成了页面刷新，我建议宁愿重新加载，只需在成功删除时从网格中删除。
服务器端删除item后，需要再次查询item列表。获得列表后，只需将其重新分配给适当的组件属性。否则 Angular 不知道发生了什么变化。
这篇文章可能对你有帮助medium.com/engineering-on-the-incline/…

标签： javascript angular typescript angular6

【解决方案1】：

您可能需要在 Angular 路由中使用“onSameUrlNavigation”选项。

RouterModule.forRoot(routes, {onSameUrlNavigation: ‘reload’})

【讨论】：

它说它不适用于任何[]

【解决方案2】：

不要尝试重新加载页面，而是调用用于在删除 http 调用成功时再次填充条目的 http 方法。

     this.assignmentAuditService.deleteGroupFromSelection(this.assignmentAudit.id)
          .subscribe(
            data => {
this.entries = this.http.get() // something like this. here this.entries refers to data that is used to populate html.
              console.log(data);
            },
            error => console.log(error));
       }

你也可以使用一个 BehaviorSubject 来发出一个值，听它，你可以决定再次调用this.entries = this.http.get()。

【讨论】：

我需要重新加载相同的页面“/assignmentAudit”，那么我该如何将它放入 this.http.get() 中？
既然这是SPA，我们必须避免重新加载页面并尽可能地重新加载/刷新数据。

【解决方案3】：

当您使用 Angular 时，完全不建议将其作为最佳实践，您可以在每个 delete 之后简单地发出 data list，这样您也可以直观地更新数据，但如果您想要这样的行为。

第一种情况通过重新加载整个页面，您可以在每个delete之后这样做

window.location.reload();

第二种情况如果您只需要重新加载组件，您可以解决这个问题并通过 hack 来实现它（只是为了欺骗 component 你导航 再次导航到它）

this.router.navigateByUrl('/DummyComponent', {skipLocationChange: true}).then(() => this.router.navigate(['Your actualComponent you want to reload']));

/DummyComponent 可能是一个空组件，您将使用它来欺骗您需要刷新/重新加载的实际组件

【讨论】：

但是加载整个页面并不是一个好习惯。 :( . 只想重新加载组件
我只是更新了应该适用于“第二种情况”的答案

【解决方案4】：

你能展示如何将对象数组绑定到模板吗？我认为您只需从数组中删除项目然后模板它也会更新数据。

类似这样的：

this.nas.assignmentAudit = this.nas.assignmentAudit.filter(a => a.id !== this.assignmentAudit.id);

【讨论】：