Данные не обновляются при обновлении Angular

Question

Привет У меня есть код, где все работает, как ожидалось, для страницы, где я могу обновить некоторые поля (день недели, время открытия и время закрытия). Я могу успешно обновить его, нажав кнопку обновления (в журналах данные также отправляются на серверную часть), и он переходит к таблице обновленных данных, но иногда мне приходится повторно ссылаться на sh страницу, чтобы увидеть обновленные значения. Это также иногда происходит на других вкладках, например, при добавлении новых данных в таблицу. Я не знаю, вызвано ли это Angular или серверной частью (spring-boot) или чем-то еще. Заранее спасибо.

Вот мой код:

import { Component, OnInit, Inject } from '@angular/core';
import { Router } from "@angular/router";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
import { first } from "rxjs/operators";
import { RegularDaysService, RegularDays } from '../service/regular-days.service'
@Component({
  selector: 'app-edit-regulardays',
  templateUrl: './edit-regulardays.component.html',
  styleUrls: ['./edit-regulardays.component.css']
})
export class EditRegularDaysComponent implements OnInit {

  regDay: RegularDays;
  editForm: FormGroup;

 constructor(
    private router: Router,
    private httpClientService: RegularDaysService,
    private formBuilder: FormBuilder
  ) { }

  ngOnInit() {
    let regDayId = window.localStorage.getItem("editRegularDaysId");
    if (!regDayId) {
      alert("Invalid action.")
      this.router.navigate(['regulardays']);
      return;
    }
    this.editForm = this.formBuilder.group({
      id: [],
      dayOfWeek: [''],
      openFrom: ['', Validators.required],
      openTo: ['', Validators.required],
    });
    console.log(this.editForm.value);
    this.httpClientService.getRegularDaysById(+regDayId)
      .subscribe(data => {
        this.regDay = data;
        this.regDay.dayOfWeek = this.formatNumbersToDays(this.regDay.dayOfWeek);
        this.regDay.openFrom = this.formatTime(this.regDay.openFrom);
        this.regDay.openTo = this.formatTime(this.regDay.openTo);
        console.log(data);

        this.editForm.setValue(data);
      });
  }

// --some code for formatting data for database--

  onSubmit() {
    let formattedObject = this.formattedRegularDay(this.editForm.value);
    console.log(JSON.stringify(formattedObject));
    this.httpClientService.updateRegularDays(formattedObject)
      .pipe(first())
      .subscribe(
        data => {
          {
            // alert('Day updated successfully.');
            this.router.navigate(['regulardays']);
          }
        },
        error => {
          // alert(error);
        });
  }

}

мой html:

<div class="col-md-6">
  <h2 class="text-center">Edit regular day</h2>
  <form [formGroup]="editForm" (ngSubmit)="onSubmit()">

    <div class="material-input">
      <mat-form-field class="form-group">
        <mat-label>Day of week</mat-label>
        <mat-select formControlName="dayOfWeek" placholder="Day of week">
          <mat-option *ngFor="let day of dayOfWeek" [value]="day">
            {{day}}
          </mat-option>
        </mat-select>
        <mat-error *ngIf="editForm.get('dayOfWeek').errors && (editForm.get('dayOfWeek').touched)">
          Please pick a day
        </mat-error>
      </mat-form-field>
    </div>

    <div class="material-input">
      <mat-form-field class="form-group" appearance="outline">
        <mat-label>Open from</mat-label>
        <input matInput readonly placeholder="Open from" formControlName="openFrom" [ngxTimepicker]="startTimePicker"
          [format]="24">
        <ngx-material-timepicker #startTimePicker></ngx-material-timepicker>
        <mat-error *ngIf="editForm.get('openFrom').errors && (editForm.get('openFrom').touched)">
          This field is required
        </mat-error>
      </mat-form-field>
    </div>

    <div class="material-input">
      <mat-form-field class="form-group" appearance="outline">
        <mat-label>Open to</mat-label>
        <input matInput readonly placeholder="Open to" formControlName="openTo" [ngxTimepicker]="startTimePicker2"
          [format]="24">
        <ngx-material-timepicker #startTimePicker2></ngx-material-timepicker>
        <mat-error *ngIf="editForm.get('openTo').errors && (editForm.get('openTo').touched)">
          This field is required
        </mat-error>
      </mat-form-field>
    </div>

    <button mat-raised-button color="primary" type="button" class="btn btn-success" [disabled]="!editForm.valid"
      (click)="onSubmit()" routerLink="/regulardays">Save</button>
  </form>
</div>

И мой сервис:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from "rxjs/index";

export class RegularDays {
  constructor(
    public id: string,
    public dayOfWeek: string,
    public openFrom: string,
    public openTo: string,
  ) { }
}

@Injectable({
  providedIn: 'root'
})
export class RegularDaysService {

  constructor(
    private http: HttpClient
  ) { }

  baseUrl: string = 'http://localhost:8080/hm/rest/regulardays/';   //local

  getRegularDays() {

    const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
    return this.http.get<RegularDays[]>(this.baseUrl + '', { headers });
  }

  getRegularDaysById(id: number): Observable<RegularDays> {
    return this.http.get<RegularDays>(`${this.baseUrl}${id}`);
  }

  public updateRegularDays(regularDay: RegularDays): Observable<RegularDays> {
    const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
    return this.http.put<RegularDays>(`${this.baseUrl}${regularDay.id}`, regularDay, { headers });
  }
}

РЕДАКТИРОВАТЬ

Если я добавлю это: .then(() => { window.location.reload(); });, то это refre sh, но только на localhost, а не на сервере ..