Update mat-table data after making change to database

First, just want to say I'm fairly new to Angular, Material, and http so if you could be specific or include a code snippet with any response I'd appreciate it.

I'm pulling data from a db2 database and able to display it in a mat-table. I can edit the database using a matform and httpclientmodule; however, when I make changes I can't get the table data to refresh without reloading the page.

I tried the paginator trick (where you set the paginator value to the current value to trigger a table update) but I don't think it works when using http.

Does anyone have a good solution for this? Here is some of my code:

import {Component, AfterViewInit, ViewChild, Injectable, OnInit, 
ChangeDetectorRef} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {MatPaginator, MatSort, MatTableDataSource, MatInputModule, 
MatFormField, MatInput, MatFormFieldModule} from '@angular/material';
import {Observable} from 'rxjs/Observable';
import {merge} from 'rxjs/observable/merge';
import {of as observableOf} from 'rxjs/observable/of';
import {catchError, map, tap} from 'rxjs/operators';
import {startWith} from 'rxjs/operators/startWith';
import {switchMap} from 'rxjs/operators/switchMap';
import {SelectionModel} from '@angular/cdk/collections';
import { FormGroup, FormControl } from '@angular/forms';

export class ContractorsDao {
  constructor(private http: HttpClient) {}

  // Sends request including which field to sort by and to sort asc or desc
  getContractorRecords(sort: string, order: string, page: number): 
Observable<Contractor[]> {
    const href = 'http://localhost:8080/pzapp-servlet';
    const requestUrl =
      `${href}/controllercontractors?message=getMstx&sort=${sort}&order=${order}`;
    return this.http.post<Contractor[]>(requestUrl, 'getMstx');
  }
}

@Component({
  selector: 'app-search-contractors',
  templateUrl: 'contractors.component.html',
  styleUrls: ['./contractors.component.css']
})
export class ContractorsComponent implements AfterViewInit, OnInit {

// Initialize items for contractor mat-table

  // Columns displayed on the table
  displayedColumns = [
    'contractor-name',
    'contractor-phone',
    'select-contractor'
  ];

  // Initialize mat-table data source
  dataSource = new MatTableDataSource<Contractor>();

  // Initialize local database
  contractorDatabase: ContractorsDao | null;

  // Initialize mat-table features
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;
  selection = new SelectionModel<Contractor>(false);

  editContractorForm: FormGroup;

  // Specific record selected
  activeRecord: Contractor;


  contractorsUrl = 'http://localhost:8080/pzapp-servlet/controllercontractors';

  // Triggered when record is selected from table
  viewRecord(row) {
    // Stores selected row for display
    this.activeRecord = row;
    this.editContractorForm = new FormGroup({
      NAME: new FormControl(this.activeRecord.NAME),
      PHON: new FormControl(this.activeRecord.PHON)
    });
  }

  // Takes filter text and filters table
  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); 
  // MatTableDataSource defaults to lowercase matches
    this.dataSource.filter = filterValue;
  }

  ngOnInit() {
    this.editContractorForm = new FormGroup({
    NAME: new FormControl(null),
    PHON: new FormControl(null),
    });
  }
  constructor(private http: HttpClient) {}

  ngAfterViewInit() {

    this.contractorDatabase = new ContractorsDao(this.http);
    this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);

    merge(this.sort.sortChange, this.paginator.page)
      .pipe(
      startWith({}),
      switchMap(() => {
        return this.contractorDatabase.getContractorRecords(
          this.sort.active, this.sort.direction, this.paginator.pageIndex);
      }),

    ).subscribe(data => this.dataSource.data = data);
    this.dataSource.paginator = this.paginator;

  }
  onSubmit(value: any) {
    this.http.put(this.contractorsUrl, this.editContractorForm.value).subscribe();

  //  this.dataSource.paginator = this.paginator;
  }
}

// Interface for PZCNTR listing
export interface Contractor {
  PCNAME: string;
  PCPHON: number;
}