Вызов модуля из службы

Question

Я создаю веб-приложение для создания отчетов с использованием angular, поэтому я столкнулся с проблемой отправки данных в firebase, поэтому при отправке не удается прочитать целые или числовые значения.

HTML

          <ion-item>
              <ion-label>Date of the event</ion-label>
              <ion-datetime display-format="MMM DD, YYYY" [(ngModel)]="centre.date"></ion-datetime>
          </ion-item>

          <ion-item>
            <ion-label>Starting Time</ion-label>
            <ion-datetime displayFormat="h:mm A" [(ngModel)]="centre.Stime"></ion-datetime>
          </ion-item>

          <ion-item>
            <ion-label>Closing Time</ion-label>
            <ion-datetime displayFormat="h:mm A" [(ngModel)]="centre.Ctime"></ion-datetime>
          </ion-item>      

          <ion-item>
            <!-- MC of the Evening -->
            <ion-input placeholder="MC" [(ngModel)]="centre.mc"></ion-input>
          </ion-item>

машинопись

import { Component, OnInit } from '@angular/core';
import { Centre, CentreService} from './../../service/centre.service';
import { ActivatedRoute } from '@angular/router';
import { NavController, LoadingController } from '@ionic/angular';

@Component({
  selector: 'app-center',
  templateUrl: './center.page.html',
  styleUrls: ['./center.page.scss'],
})
export class CenterPage implements OnInit {
  centre: Centre = {
    female: number,
    male: number,
    children: number,
    visitors: number,
    total: number,
    date : new Date().getTime(),
    Stime : new Date().getTime(),
    Ctime : new Date().getTime(),
    mc: ''

  };

  centreId = null;

  constructor(private route: ActivatedRoute, private nav: NavController, private centreService: CentreService, private loadingController: LoadingController) { }

  ngOnInit() {
    this.centreId = this.route.snapshot.params['id'];
    if (this.centreId)  {
      //this.loadTodo();
    }
  }

  async saveTodo() {

    const loading = await this.loadingController.create({
      message: 'Saving centre report..'
    });
    await loading.present();

      this.centreService.addCentre(this.centre).then(() => {
        loading.dismiss();
        //this.nav.goBack('/tab1');
      });
    //}
  }

  async saveIncident() {

    const loading = await this.loadingController.create({
      message: 'Saving Incident Report..'
    });
    await loading.present();

      this.centreService.addCentre(this.centre).then(() => {
        loading.dismiss();
        //this.nav.goBack('/tab1');
      });
    //}
  }
}

сервис

import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

export interface Centre{
  id?: string;
  female: number;
  male: number;
  children: number;
  visitors: number;
  total: number;
  date: number;
  Stime: number;
  Ctime: number;
  mc: string;
}

@Injectable({
  providedIn: 'root'
})
export class CentreService {
  private centreCollection: AngularFirestoreCollection<Centre>;

  private centre: Observable<Centre[]>;

  constructor(db: AngularFirestore) {
    this.centreCollection = db.collection<Centre>('CentreServReport');

    this.centre = this.centreCollection.snapshotChanges().pipe(
      map(actions => {
        return actions.map(a => {
          const data = a.payload.doc.data();
          const id = a.payload.doc.id;
          return { id, ...data };
        });
      })
    );
  }

  addCentre(Centre: Centre) {
    return this.centreCollection.add(Centre);
  }
}

Результаты Firebase

Мне нужна помощь в чтении значений из HTML-формы и их сохранении в облаке.