时间戳

首页 > 解决方案 > Angular中ngFor内的isEmpty条件

angular - Angular中ngFor内的isEmpty条件

问题描述

我有一个项目，我在其中显示医生的日程安排。

我创建了一个名为“dates”的数组，其中包含字符串形式的下 7 个日期

我有一个时间包，比如名为 scheduleTime 的类

其中有

export class ScheduleTime{
    date: string;
    hours: number;
    minutes: number;
}

我收到一个名为“Schedule Time”的 scheduleTime 类型的数组，其中包含日期、小时和分钟

我相应地显示它

这是我的html代码

       <div *ngFor="let Date of dates; let z = index" class="dateBox">
                     <div *ngFor="let time of ScheduleTime; let i = index">
                            <div *ngIf="Date == 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>
         </div>

在这个 html 代码中，我通过比较时间包为接下来的 7 个日期打印时间段

这是一个示例图像： 时间表显示

这是我的相关数据stucode：

dates = [];

ScheduleTime: ScheduleTime[] = [];

问题是：我希望如果没有特定日期的时间包，它应该显示“没有可用的时间表”

标签： angular

解决方案

您要在其上放置条件并使用该变量，如果放置要显示的 html 并在 ng-template 中放置，就像找不到记录或其他东西一样。

   <div  *ngFor="let Date of dates; let z = index" class="dateBox">
<div *ngIf="ScheduleTime; else notExist";>
                         <div  *ngFor="let time of ScheduleTime; let i = index">
                                <div *ngIf="Date == 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>
</div>
    <ng-template #notExist>
            No available schedules
        </ng-template>
           </div>

推荐阅读