Data NOT refreshing onSubmit Form and route change, Angular 6 - angular6

Question

I can't figure out why the data does NOT update in my table, when I make a change (post, delete, etc.) to the SQL database. I have to refresh the browser every time to see the update in the table.
This is a simple list that gets updated when submitting a form with changes. At the end of the onSubmit function, it routes back to fleet-home, but the table shows the old data (until browser refresh). No errors.
I feel like I'm missing a major Angular step here (still new to Angular).
I've tried adding "...this.ngZone.run(...).." to the router navigate, but it's not refreshing the data.
I read that "...this.route.paramMap.subscribe(...)" can listen for data changes, but it's not working (perhaps I'm not using it correctly).
import { Component, OnInit } from '#angular/core';
import { ActivatedRoute, Params, Router } from '#angular/router';
import { FleetService } from 'src/app/fleet.service';
import { NgForm } from '#angular/forms';
#Component({
selector: 'app-fleet-home',
templateUrl: './fleet-home.component.html',
styleUrls: ['./fleet-home.component.css']
})
export class FleetHomeComponent implements OnInit {
public assignmentList: Array<any>;
public vehicleList: Array<any>;
id: number;
editMode = false;
constructor(
public route: ActivatedRoute,
public router: Router,
private fleetService: FleetService
) {
fleetService.getVehicleList().subscribe((importVehicleList: any) => this.vehicleList = importVehicleList);
fleetService.getAssignmentList().subscribe((importAssignmentList: any) => this.assignmentList = importAssignmentList);
}
ngOnInit() {
this.route.paramMap.subscribe(map => {
// adding this did not help, not sure if this is correct
this.fleetService.getAssignmentList().subscribe((importAssignmentList: any) => this.assignmentList = importAssignmentList);
});
}
}
Component with onSubmit...
onSubmit(form: NgForm) {
const value = form.value;
const assigmentAdd = form.value;
var newAssignmentObject = {
Id: assigmentAdd.Id,
CameraId: assigmentAdd.CameraId,
VehicleId: assigmentAdd.VehicleId,
DateCreated: assigmentAdd.DateCreated,
Deleted: assigmentAdd.Deleted
}
this.fleetService.addAssignment(newAssignmentObject).subscribe
(data => {
this.ngZone.run(() => this.router.navigate(['/fleet-home'])).then();
});
}
fleet-home HTML table...
<table class="table table-hover" id="searchTable">
<thead>
<tr>
<th>Date Created</th>
<th>Vehicle Assigned to</th>
<th>Camera</th>
<th>Edit and/or Delete Assignment</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let mat of assignmentList; let in = index" style='text-align:left;'>
<td *ngIf="mat.deleted === false">{{ mat.dateCreated | date: 'medium' }} </td>
<span *ngFor="let veh of vehicleList">
<td *ngIf="mat.vehicleId === veh.id && mat.deleted === false"> {{ veh.name }} </td>
</span>
<td *ngIf="mat.deleted === false">{{ mat.cameraId }} </td>
<td *ngIf="mat.deleted === false"> <a [routerLink]="['/fleet-home/fleet-edit/', mat.id]">EDIT or
DELETE</a> </td>
</tr>
</tbody>
</table>

Answer 1

You have to just call the function that fetch the records.
This is Not Possible in angular2, reason is once you load any component that component is only reload once you navigate from another route to that route again.
But you can reload forcefully
Basically there are two methods which are
you can call ngOnInit() method again and again as per need, which is not a recommended way
you can call one commonn method from ngOnInit() and later as per need call that function again like this
ngOnInit(){
this.callingFunction();
}
forLaterUse(){
this.callingFunction();
}