CODEWITHSUNDEEP
angular6
TMR
TMR

Reputation: 87

Data NOT refreshing onSubmit Form and route change, Angular 6

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>

Upvotes: 0

Views: 224

Answers (1)

Mukesh Ranjan
Mukesh Ranjan

Reputation: 165

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(); 
 }

Upvotes: 1

Related Questions