我想从“Reservas”集合中获取数据以将其显示在我的个人资料页面中，但我不知道该怎么做，我可以从“User”集合中获取电子邮件并将其保存在“Reservas”集合中吗，这是我的储备代码：
reservas.service.ts
``` import { inject, Injectable } from "@angular/core";
import { addDoc, collection, Firestore } from "@angular/fire/firestore";
@Injectable({
providedIn: 'root',
})
export class ReservasService {
private firestore = inject(Firestore);
constructor( ) { }
async guardarReserva(fechaInicio: any, lugares: any, puertoSalida: any, noches: any, huespedes: any, nombreCamarote: any, numeroCamarotes: any, nombreCrucero: any) {
const obj ={
"fechaInicio" : fechaInicio,
"lugares" : lugares,
"puertoSalida" : puertoSalida,
"noches" : noches,
"huespedes" : huespedes,
"nombreCamarote" : nombreCamarote,
"numeroCamarotes" : numeroCamarotes,
"nombreCrucero" : nombreCrucero
};
const Ref = collection(this.firestore, 'Reservas');
await addDoc(Ref, obj);
}
} ```
reservar.page.ts
``` import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormControl, FormGroup, FormsModule, Validators, ReactiveFormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { RouterLink } from '@angular/router';
import { MenuController } from '@ionic/angular';
import { ReservasService } from '../reservas.service';
import { AlertController } from '@ionic/angular';
@Component({
selector: 'app-reservar',
templateUrl: './reservar.page.html',
styleUrls: ['./reservar.page.scss'],
standalone: true,
imports: [CommonModule, FormsModule, RouterLink, IonicModule, ReactiveFormsModule ]
})
export class ReservarPage implements OnInit {
today: any;
ngOnInit(){
this.getDate();
}
getDate() { const date = new Date(); this.today = date.getFullYear() + '-' + ('0' + (date.getMonth() + 1)).slice(-2) + '-' + ('0' + date.getDate()).slice(-2); console.log(this.today); }
cruceros=[
]
lugares = [
]
puertos = [
]
camarotes = [
]
onCruceroChange() {
}
onLugarChange() {
}
compareFn(o1, o2) {
return o1 && o2 ? o1.id === o2.id : o1 === o2;
}
calcularCamarotes() {
const huespedes = this.reservaForm.value.huespedes || 0;
const numeroCamarotes = Math.ceil(Number(huespedes) / 4).toString();
this.reservaForm.patchValue({ numeroCamarotes });
}
reservaForm = new FormGroup({
fechaInicio: new FormControl("", Validators.required),
lugares: new FormControl(null, [Validators.required]),
puertoSalida: new FormControl("", [Validators.required]),
noches: new FormControl("", [Validators.required]),
huespedes: new FormControl("", [Validators.required]),
nombreCamarote: new FormControl("", [Validators.required]),
numeroCamarotes: new FormControl("1", [Validators.required]),
nombreCrucero: new FormControl(null, [Validators.required])
})
async onSubmit(){
await this.reservasService.guardarReserva(
this.reservaForm.value.fechaInicio,
this.reservaForm.value.lugares,
this.reservaForm.value.puertoSalida,
this.reservaForm.value.noches,
this.reservaForm.value.huespedes,
this.reservaForm.value.nombreCamarote,
this.reservaForm.value.numeroCamarotes,
this.reservaForm.value.nombreCrucero)
}
async alertaReserva() {
const alert = await this.alertController.create({
header: '¡Crucero Reservado Con Éxito!',
message: 'Si quieres ver o cancelar tus reservas, lo puedes hacer desde tu perfil',
buttons: ['Action'],
});
await alert.present();
}
constructor(public menu: MenuController, public reservasService: ReservasService, private alertController: AlertController) {
this.menuActive();
this.lugares = this.lugares;
this.puertos = this.puertos;
}
menuActive(){
this.menu.enable(true, 'menu');
}
} ```
reservar.page.html
´´´ <ion-header>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>Reservar</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<form [formGroup]="reservaForm" (ngSubmit)="onSubmit()">
<ion-item class="titulo" color="primary">
<ion-title>Nuestra Flota</ion-title>
</ion-item>
<ion-item>
<ion-select label="Crucero:" placeholder="Escoge un crucero" name="nombreCrucero" formControlName="nombreCrucero" [compareWith]="compareFn" (ionChange)="onCruceroChange()">
<ion-select-option *ngFor="let crucero of cruceros" [value]="crucero" type="text">{{ crucero.name }}</ion-select-option>
</ion-select>
</ion-item>
<ion-item class="titulo" color="primary">
<ion-title>Lugares para visitar</ion-title>
</ion-item>
<ion-item>
<ion-select label="Lugares para visitar:" placeholder="Que lugares quieres visitar" name="lugares" formControlName="lugares" [compareWith]="compareFn" (ionChange)="onLugarChange()">
<ion-select-option *ngFor="let lugar of lugares" [value]="lugar" type="text">{{ lugar.name }}</ion-select-option>
</ion-select>
</ion-item>
<ion-item class="titulo" color="primary">
<ion-title>Escoge el puerto de salida</ion-title>
</ion-item>
<ion-item>
<ion-select label="Puerto de Salida:" placeholder="Escoge el puerto de salida" name="puertoSalida" formControlName="puertoSalida" [compareWith]="compareFn">
<ion-select-option *ngFor="let puerto of puertos" [value]="puerto" type="text">{{ puerto.name }}</ion-select-option>
</ion-select>
</ion-item>
<ion-item class="titulo" color="primary">
<ion-title>Cantidad de noches</ion-title>
</ion-item>
<ion-item>
<ion-input label="Número de noches:" placeholder="Escoge el número de noches" name="noches" formControlName="noches" type="number"></ion-input>
</ion-item>
<ion-item class="titulo" color="primary">
<ion-title>Cantidad de huéspedes</ion-title>
</ion-item>
<ion-item>
<ion-input label="Número de huéspedes:" placeholder="Escoge el número de huéspedes" name="huespedes" formControlName="huespedes" type="number" (ionInput)="calcularCamarotes()"></ion-input>
</ion-item>
<div style="text-align: center">Cada 5 huéspedes se te añade otro camarote</div>
<ion-item class="titulo" color="primary">
<ion-title>Camarotes</ion-title>
</ion-item>
<ion-item>
<ion-select label="Camarote:" placeholder="Escoge un camarote" name="nombreCamarote" formControlName="nombreCamarote" [compareWith]="compareFn">
<ion-select-option *ngFor="let camarote of camarotes" [value]="camarote" type="text">{{ camarote.name }}</ion-select-option>
</ion-select>
</ion-item>
<div style="text-align: center">Puedes ver todos los camarotes en la sección "Camarotes" dentro de cada crucero</div>
<ion-item class="titulo" color="primary">
<ion-title>Número de Camarotes</ion-title>
</ion-item>
<ion-item>
<ion-input label="Número de camarotes:" placeholder="Escoge el número de camarotes" name="numeroCamarotes" formControlName="numeroCamarotes" [value]="reservaForm.value.numeroCamarotes" readonly></ion-input>
</ion-item>
<ion-item class="titulo" color="primary">
<ion-title>Fecha de Inicio del Crucero</ion-title>
</ion-item>
<ion-datetime [min]="today" class="fecha" presentation="date" name="fechaInicio" formControlName="fechaInicio"></ion-datetime>
<div class="boton">
<ion-button type="submit" (click)="alertaReserva()" [disabled]="reservaForm.invalid">Reservar</ion-button>
</div>
</form>
</ion-content> ´´´
我不得不删除一些代码，因为这个问题有很多不必要的字符
您可以创建一个服务方法来检索预订，然后在您的个人资料组件中调用此方法。并且要将用户的电子邮件从“User”集合保存到“Reservas”集合中，您可以修改guardarReserva方法以包含用户的电子邮件。
async getReservas(email: string) {
const Ref = collection(this.firestore, 'Reservas');
const querySnapshot = await getDocs(Ref);
const reservas = querySnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
return reservas.filter(reserva => reserva.email === email);
}