从服务中调用模块

时间:2019-03-14 09:25:30

标签: css angular typescript firebase ionic-framework

我正在使用angular构建报表Web应用程序,因此面临将数据提交到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结果

enter image description here

我需要帮助来从html表单中读取值并将其存储在云中。

0 个答案:

没有答案