как обновить sh UI без перезагрузки страницы в Angular

Question

У меня есть несколько диаграмм на моей странице, и я пытаюсь выполнить вызов удаления, но по какой-то причине пользовательский интерфейс моей диаграммы не обновляется сразу, когда я нажимаю кнопку удаления. Мне всегда нужно обновлять sh браузер, чтобы увидеть изменения.

Я загрузил полный код для этих двух компонентов her https://stackblitz.com/edit/angular-ivy-nnun96, поэтому я был бы очень признателен, если бы я мог получить какое-либо предложение о том, как заставить пользовательский интерфейс удалить диаграмму немедленно, когда пользователь нажмите кнопку Удалить.

M c Список диаграмм TS

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

M c Список диаграмм 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;
}

Прямо сейчас это выглядит так

Answer 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.OnPu sh (если вы его используете)

Answer 2

deleteChart(){
    this.chartService.deleteChart(this.chart.guid).subscribe((deleted) => {
      console.log(deleted);
      this.ngOnInit();. // Adding this line should solve
    });
  }