Tengo la siguiente peticion que me trae un objeto:
getAvailability(date: any) {
this.bookingService.getAffiliateAvailability(this.doctor?.id, this.addressID, date)
.subscribe(res => {
this.availability = res;
const { slots } = this.availability;
this.slots = slots;
console.log(slots);
this.getSchedulOptions();
//this.changeDate(slots);
}, (error => {
console.error(error)
}))
}
Dentro de este tengo un metodo que me obtiene el rango de las horas:
getSchedulOptions() {
let hours: any[] = [];
this.slots.forEach((s: any) => {
let disable;
//console.log('s', s);
let start = new Date(s.start);
//console.log('probando start', start);
let end = new Date(s.end);
//console.log('probando end', end);
let range = this.getrange(start, end);
hours= hours.concat(range);
})
console.log('customRange', hours);
}
getrange = (start: Date, end: Date) => {
let startDateInteger = start.getHours();
let endDateInteger = end.getHours();
let hours = [];
// hours.push(this.integerAsDateString(startDateInteger));
for (let i = startDateInteger; i < endDateInteger+1; i++) {
let tempDate =new Date(start);
tempDate.setHours(i);
hours.push(tempDate);
}
return hours;
}
integerAsDateString = (num: number) => {
return num + ":00"
}
Este es el resultado: Y tengo un evento que evalua el cuando se ha seleccionado un dia en un calendario
changeDate = (date: any) => {
console.log('date :>> ', date);
this.bookingService.bookingModel.appointmentDate = date;
if(date){
this.timeList = this.getAvailability(date);
console.log('timeList', this.timeList);
}
}
Y recorro el timeList en el html:
<div *ngIf="selectedDate" data-aos="fade-up" data-aos-anchor-placement="top-bottom" class="DateContainer py-2 d-flex">
<!-- Slider main container -->
<mat-icon class="swiperLeft m-auto">chevron_left</mat-icon>
<swiper class="TimeContainer" [config]='swiperConfig' (swiper)="onSwiper($event)" (slideChange)="onSlideChange()">
<ng-template swiperSlide class="SwiperItem text-center" *ngFor="let time of timeList; let i = index">
<button *ngIf="selectedTime == time" mat-flat-button color='primary' class="SelectedTime">{{time}}
</button>
<button *ngIf="selectedTime != time" mat-stroked-button (click)="setTime(time)">{{time}}
</button>
</ng-template>
</swiper>
<mat-icon class="swiperRight m-auto">chevron_right</mat-icon>
</div>
Actualmente no me muestra nada, pero practicamente quiero que una vez he seleccionado el dia el rango de horas que filtro en getSchedulOptions se itere sin repeticiones y se recorra con el ngFor. ¿Cómo puedo hacerlo? Si ya he filtrado y obtenido el rango ¿ahora como lo muestro en pantalla? Ayuda, porfavor. Quiero lograr algo asi: