数据不刷新提交表单和路由更改，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 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()方法，不推荐这样做

您可以从 ngOnInit() 调用一个 commonn 方法，然后根据需要再次调用该函数，像这样

ngOnInit(){
this.callingFunction();
 }

forLaterUse(){
  this.callingFunction(); 
 }