我正在使用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结果
我需要帮助来从html表单中读取值并将其存储在云中。