如何在不重新加载 Angular 页面的情况下刷新 UI答案

【问题标题】：how to refresh UI without reloading the page in Angular如何在不重新加载 Angular 页面的情况下刷新 UI
【发布时间】：2020-10-09 02:19:24
【问题描述】：

我的页面中有多个图表，我正在尝试进行删除调用，但由于某种原因，当我单击删除按钮时，我的图表 UI 没有立即更新。我总是需要刷新浏览器才能看到更改。

我将这两个组件的完整代码上传到她的https://stackblitz.com/edit/angular-ivy-nnun96，因此如果我能就如何在用户按下删除按钮时让 UI 立即删除图表获得任何建议，我将不胜感激。

Mc 图表列表 TS

  deleteChart(){
    this.chartService.deleteChart(this.chart.guid).subscribe((deleted) => {
      console.log(deleted);
    });
  }

Mc 图表列表 HTML

 <button mat-menu-item (click) = "deleteChart()" *ngIf = "chart.hasAccess && chart.canEdit && !chart.isPublished">Delete Chart</button>

父 HTML

       <mc-chart-list [chart]="chart" [editMode]="true" [wsType]="workspace.type"></mc-chart-list>

父 TS

ngOnInit(): void {
this.charts = this.workspace.charts;
}

现在是这个样子

【问题讨论】：

Error in src/main.ts (6:27) Cannot find module './app/app.module ur stackbliz 出错了
我知道它不会起作用，因为我无法上传整个项目。我只是把它放在那里，以便人们可以看到整个代码，也许他们可以帮助我。
罪魁祸首一定是在 ChartService 中，请将该代码也发布到 stackblitz 上。这个项目可以在 github 上公开访问吗？嘿，顺便说一句，我住在迈阿密！

标签： html angular typescript angular-material eventemitter

【解决方案1】：

您可以使用 ChangeDetectorRef 来检测视图上的更改。

import {ChangeDetectorRef} from '@angular/core';

constructor(private ref: ChangeDetectorRef)

deleteChart(){
    this.chartService.deleteChart(this.chart.guid).subscribe((deleted) => {
      console.log(deleted);
      this.ref.detectChanges();
    });
  }

注意：删除 changeDetection: ChangeDetectionStrategy.OnPush（如果你正在使用它）

【讨论】：

如果这不起作用，那么您的 ChartService 可能有问题