Данные НЕ обновляются при отправке формы и изменении маршрута, Angular 6

Question

Я не могу понять, почему данные НЕ обновляются в моей таблице при внесении изменений (публикация, удаление и т. Д.) В базу данных SQL. Я должен обновлять браузер каждый раз, чтобы увидеть обновление в таблице. Это простой список, который обновляется при отправке формы с изменениями. В конце функции onSubmit он возвращается обратно к fleet-home, но в таблице отображаются старые данные (до обновления браузера). Нет ошибокЯ чувствую, что здесь пропущен важный шаг Angular (все еще новый для Angular).

Я пытался добавить «... this.ngZone.run (...) ..» к маршрутизаторунавигация, но это не обновление данных. Я прочитал, что "... this.route.paramMap.subscribe (...)" может прослушивать изменения данных, но он не работает (возможно, я не правильно его использую).

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

  }

}

Компонент с 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

Вы должны просто вызвать функцию, которая извлекает записи. Это невозможно в angular2, причина в том, что при загрузке любого компонента этот компонент перезагружается только после повторного перехода от другого маршрута к этому маршруту.

Но вы можете принудительно перезагрузить

В основном, естьдва метода,

, вы можете вызывать метод ngOnInit () снова и снова по мере необходимости, что не является рекомендуемым способом

вы можете вызывать один метод commonn из ngOnInit () и позже согласнонужно снова вызвать эту функцию, как это

ngOnInit(){
this.callingFunction();
 }

forLaterUse(){
  this.callingFunction(); 
 }