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

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

我上传了这两个组件的完整代码，所以如果我能得到任何建议，当用户按下删除按钮时，如何让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>

现在看起来像这样

---

您可以使用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（如果您正在使用它）

src/main.ts（6:27）中的错误找不到模块。/app/app.module

ur stackbliz给出错误我知道它无法工作，因为我无法上传整个项目。我只是把它放在那里，这样人们就可以看到整个代码，也许他们可以帮助我。罪魁祸首一定在ChartService，请将代码也发布在stackblitz上。此项目是否可在github上公开访问？嘿，顺便说一句，我住在迈阿密！如果这不起作用，那么您的ChartService可能存在问题

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

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

constructor(private ref: ChangeDetectorRef)

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