Change Detection does not update the View After MatDialog AfterClosed

I have a Simple Table for performing the CRUD Operations against each Tuple. On Click of an Edit Button the Object 'store: OpenStore' gets passed to editStore function and invokes a MatDialog. Post changes to the Form Inside the Dialog when the Submit Button is clicked and dialogRef is closed, the data is successfully passed onto the Parent but by that time the control moves out of the editStore function.

Here is my editStore Function :-

  editStore(store: OpenStore) {
  console.log(store);
  this.storeService.getStoreById(store.storeId).subscribe( response => {
    this.dialog.open(StoreEditComponent, {
      height: '450px', data: response.json() })
      .afterClosed().subscribe( response2 => {
        store = response2;
        console.log(store);
        this.cd.detectChanges();
    });
  });
  console.log(store);
 // this.router.navigate(['/stores/edit/' + storeId]);
}

Problem Statement : As mentioned in many of the tutorials where they take help of an array of Objects and use the splice method to update the Array. Whereas in a real case scenario when working with database, i have successfully placed a PUT request onto the database to update the Store and it would not be right to maintain the list of Stores as an array and use the splice method on the same. I have also tried to manually invoke the ChangeDetectorRef but this does not do any good. I somehow have to update the object store which is Originally passed onto the editStore Function inside the afterClosed Subscribe Method.

Here is a Snapshot of my View :-

Snapshot of my View

My Code is as Follows : -

szastore-list.component.ts

import { Component, OnInit, DoCheck, ChangeDetectorRef } from '@angular/core';
import { Router } from '@angular/router';
import { StoreService } from '../services/store.service';
import { MatDialog, MatDialogRef } from '@angular/material';
import { StoreEditComponent } from '../storeedit/storeedit.component';
import { OpenStore } from '../model/openstore';
@Component({
  selector: 'sza-storelist',
  templateUrl: './szastore-list.component.html',
  styleUrls: ['./szastore-list.component.css']
})
export class SZAStoreListComponent implements OnInit {

  private stores: OpenStore[];

  constructor(private router: Router, private storeService: StoreService, 
private dialog: MatDialog, 
    private cd: ChangeDetectorRef) { }

  ngOnInit() {
    this.storeService.getStores()
    .subscribe(response => {
      this.stores = response.json();
    });
  }

  editStore(store: OpenStore) {
      console.log(store);
      this.storeService.getStoreById(store.storeId).subscribe( response => {
        this.dialog.open(StoreEditComponent, {
          height: '450px', data: response.json() })
          .afterClosed().subscribe( response2 => {
            store = response2;
            console.log(store);
            this.cd.detectChanges();
        });
     });
      console.log(store);
     // this.router.navigate(['/stores/edit/' + storeId]);
  }
}

storeedit.component.ts

import { Component, OnInit, Inject, Optional } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { OpenStore } from '../model/openstore';
import { StoreService } from '../services/store.service';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'sza-storeedit',
  templateUrl: './storeedit.component.html',
  styleUrls: ['./storeedit.component.css']
})
export class StoreEditComponent implements OnInit {

  constructor(private storeService: StoreService, private route: ActivatedRoute,
    @Optional() @Inject(MAT_DIALOG_DATA) private store: OpenStore,
    public dialogRef: MatDialogRef<StoreEditComponent>) {
   }

  ngOnInit() {
  }

  submit(f: FormControl) {
    this.storeService.updateStore(f.value).subscribe(response => {
      this.store  = f.value;
      this.dialogRef.close(f.value);
    });
  }
}

storeedit.component.html

          <tbody>
            <tr *ngFor="let store of stores">
              <td>{{store.storeName}}</td>
              <td>{{store.storeURL}}</td>
            <td>
                <button mat-raised-button color="primary" (click)="editStore(store)">
                  <mat-icon aria-label="Edit Mode">edit_mode</mat-icon>
                </button>
            </td>
              <td>
              <button mat-raised-button color="warn" (click)="removeStore(store.storeId)">
                <mat-icon aria-label="Delete Mode">delete_mode</mat-icon>
              </button>
              </td>
            </tr>
          </tbody>