как обновить пользовательский интерфейс без перезагрузки страницы в Angular

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

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

Список чартов 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>

Родительский ТС

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

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

введите здесь описание изображения


typescript angular html angular-material eventemitter
person Aase Zi    schedule 18.06.2020    source источник
comment
Error in src/main.ts (6:27) Cannot find module './app/app.module ваш stackbliz выдает ошибку   -  person cedverd    schedule 19.06.2020
comment
Я понимаю, что это не сработает, так как я не могу загрузить весь проект. Я просто поместил его туда, чтобы люди могли видеть весь код и, возможно, они могли бы помочь мне в этом.   -  person Aase Zi    schedule 19.06.2020
comment
виновник должен быть в ChartService, пожалуйста, опубликуйте этот код и на stackblitz. этот проект общедоступен на github? эй, я живу в Майами, кстати!   -  person ihorbond    schedule 19.06.2020

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете использовать 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 (если вы его используете)

person Suraj Gupta    schedule 19.06.2020
comment
Если это не работает, возможно, у вас проблемы с ChartService. - person Suraj Gupta; 19.06.2020