离子形式多次调用ngOnInit

Question

我有一个显示Firestore中现有数据的表单，然后在更改时更新数据。问题在于，似乎多次调用了ngOnInit，然后调用了saveInspectionChanges（）函数。我不确定在页面上没有任何更改时为什么要激活这些功能。打开表单时，字段将连续闪烁，然后关闭表单时，将保存空数据。

detail.page.ts

  public inspectionID: string = this.route.snapshot.paramMap.get('id');
  public inspection: any;
  public Customer: any;
  public Site: any;
  public Tank: any;

  inspectionDetailsForm: FormGroup;

  public Users: any;

  constructor(
    private firestoreService: FirestoreService,
    private route: ActivatedRoute,
    private alertController: AlertController,
    private router: Router,
    formBuilder: FormBuilder, public firestore: AngularFirestore,
  ) {
    this.inspectionDetailsForm = formBuilder.group({
      Date: [''],
      InspectionType: [''],
      Status: [''],
    });
  }

  ngOnInit() {
    this.inspection = this.firestoreService.getInspectionDetail(this.inspectionID).valueChanges();
    this.inspection.subscribe(inspection => {
      this.inspectionDetailsForm.patchValue(inspection);
    });
  }

  updateInspection(data: any) {
    return this.firestore.collection('inspectionList').doc(this.inspectionID)
      .update(data);
  }

  saveInspectionChanges() {
    if (this.inspectionDetailsForm.status !== 'VALID') {
      console.log('form is not valid, cannot save to database');
      return;
    }
    console.log('form is valid, saving to database');
    const data = this.inspectionDetailsForm.value;
    this.updateInspection(data);
  }

detail.page.html

<ion-content>
  <form [formGroup]="inspectionDetailsForm" novalidate>
    <ion-list lines="full" class="ion-no-margin ion-no-padding">
        <ion-item>
          <ion-label position="stacked">Date</ion-label>
          <ion-input formControlName="Date" type="date"></ion-input>  
        </ion-item>
        <ion-item>
          <ion-label position="stacked">Inspection Type</ion-label>
          <ion-select formControlName="InspectionType" okText="OK" cancelText="Dismiss" (ionChange)="saveInspectionChanges()">
            <ion-select-option value="API 653 Internal">API 653 Internal</ion-select-option>
            <ion-select-option value="API 653 External">API 653 External</ion-select-option>
            <ion-select-option value="STI-SP001">STI SP-001</ion-select-option>
          </ion-select>
        </ion-item>
        <ion-item>
          <ion-label position="stacked">Status</ion-label>
          <ion-select formControlName="Status" okText="OK" cancelText="Dismiss" (ionChange)="saveInspectionChanges()">
            <ion-select-option value="Scheduled">Scheduled</ion-select-option>
            <ion-select-option value="Preliminary Report">Preliminary Report</ion-select-option>
            <ion-select-option value="Report not complete">Report not complete</ion-select-option>
            <ion-select-option value="Report complete">Report complete</ion-select-option>
          </ion-select>
        </ion-item>
    </ion-list>
  </form>

</ion-content>

detail.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { DetailPage } from './detail.page';

const routes: Routes = [
  {
    path: '',
    component: DetailPage
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes),
    ReactiveFormsModule,
  ],
  declarations: [DetailPage]
})
export class DetailPageModule {}