如果在angular中没有特定日期的数组中没有项目,我如何打印一条消息说 "NO SLOTS"?

问题描述 投票:0回答:1

我有一个项目,在这个项目中,我显示一个医生的时间段(未来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和数组中的日期不匹配,则打印消息 "没有可用的插槽",否则打印插槽。

检查这个图片。在这张图中,我在数组中有5个元素,对应的时间段如下图所示。

angular typescript
1个回答
0
投票

你可以使用属性绑定来添加信息,例如在你的html代码中写这样{{message}},在你的typescript代码中你可以给它赋值this.message="Sorry! No slots available"

© www.soinside.com 2019 - 2024. All rights reserved.