我有一个项目,在这个项目中,我显示一个医生的时间段(未来7天),我收到一个数组,其中包括时间表时间类型的对象。
export class ScheduleTime{
date: string;
hours: number;
minutes: number;
}
现在我将这些时间段显示给病人。
我的显示时间段的html代码是 。
<div *ngFor="let todayDate of dates; let z = index" class="dateBox">
<div style="margin-bottom: 10px;">{{fullDate[z] | date: 'fullDate'}}</div>
<div *ngFor="let time of ScheduleTime; let i = index">
<div *ngIf="time.date != todayDate">No available Slots</div>
<div *ngIf="todayDate == time.date">
<div class="timeSlots" [style.background-color]="startSelect>0 && endSelect>0 && i>startSelect && i<endSelect?'rgb(207, 200, 238)':null" [ngClass]="{'startClass': time.hours == st.sh && time.minutes == st.sm && startDate == time.date, 'endClass': time.hours == et.eh && time.minutes == et.em && startDate == time.date}"
(click)='timeSelector(time,i,todayDate)'>
{{time.hours}}:{{time.minutes | zero}}
</div>
</div>
</div>
<br>
<hr class="timeBoxHr">
</div>
现在的问题是:如果该特定日期没有时间段,那么它应该显示no time slots的文字
我到现在所做的是
如果todayDate和数组中的日期不匹配,则打印消息 "没有可用的插槽",否则打印插槽。
你可以使用属性绑定来添加信息,例如在你的html代码中写这样{{message}},在你的typescript代码中你可以给它赋值this.message="Sorry! No slots available"