как обновить изменения при просмотре в Angular - PullRequest
Новая
       80

как обновить изменения при просмотре в Angular

0 голосов
/ 18 июня 2020

У меня есть диаграммы, у которых есть несколько вариантов для пользователя, и я уже все реализовал, но не уверен, почему я не вижу никаких немедленных изменений, когда нажимаю кнопку «Удалить диаграмму, Publi» sh Диаграмма или неопубликованная диаграмма. Я могу увидеть результат только после обновления sh браузера.

Я новичок в Angular, поэтому мне интересно, как немедленно удалить выбранную диаграмму или заставить ее исчезнуть при нажатии кнопки удаления, а также то же самое для диаграмм publi sh и unpubli sh без необходимости обновлять sh браузер. мы будем благодарны за любую помощь или предложение. 

  @Input() chart: Chart;
  data: ChartData;
  chartData: ChartData;
  hasError: boolean = false;
  maxisChartConfig: ChartConfig;
  hasChart: boolean = false;
  @Input() editMode: boolean;
  isTextChart: boolean = false;
  constructor(private chartService: ChartService, private router: Router, private dialog: MatDialog) { }
  isGrid: boolean = false;
  @Input() wsType?: WorkspaceType;
  isPublicWs: boolean = false;

  ngOnInit(): void {
    if(this.wsType) {
      if(this.wsType == WorkspaceType.public) {
        this.isPublicWs = true;
      }
    }
    this.generateChartConfig();
    if(this.chart.chartType == ChartType.text){
      this.isTextChart = true;
    }
    else if(this.chart.chartType == ChartType.grid){
      this.isGrid = true;
    }
    if (this.chart.data) {
      if(!this.isTextChart){
        this.hasChart = true;
      }
      this.chartData = this.chart.data;
    }

  }

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

  publishChart() {
    this.chartService.setChartPublished(this.chart.guid, !this.chart.isPublished).subscribe((published) => {
      console.log(published);
    });
  }

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

Не запустится, но я загрузил полный код для этого компонента здесь https://stackblitz.com/edit/angular-ivy-bepxss. Спасибо

1 Ответ

1 голос
/ 18 июня 2020

После каждой функции вы можете вызвать oninit для восстановления диаграмм после таких изменений - 

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

}

/// Вот как я обновил переменные в моем случае - 

 saveWTPModel(){

    if(some condition){
          //Perform Save logic
 var headers = new HttpHeaders();
    headers.append('Content-Type', 'application/json');
    const httpOptions = { headers: headers };
    this.httpClient.post(environment.api_url + "/User/SavePriority", 
     this.finalWTPArray, httpOptions)
      .subscribe(
        response => {
          if(response){
            this.alertService.success('Priorities Saved.');
//Once i have saved everything I am again calling the api to get the updated data from backend. This function again is called to get the updated Priorities.
            this.getWorkTypesPriority(this.loggedinUserId);

          }
          else{
            this.alertService.warning('Problem Occurred.');
          }
        });
      }
...