Angular中ngFor内空值判断：医生日程无时段时添加提示

Hey there! Let's fix this issue where you need to display a fallback message when a date doesn't have any corresponding schedule times. Here's a straightforward approach tailored to your Angular setup:

Step 1: Add a Helper Method (Optional but Clean) #

First, let's add a simple method in your component to check if a given date has any available schedules. This keeps your template clean and makes the logic reusable if needed:

hasAvailableSchedules(date: string): boolean {
  // Check if any ScheduleTime entry matches the current date
  return this.ScheduleTime.some(timeSlot => timeSlot.date === date);
}

Step 2: Update Your Template with Conditional Rendering #

Modify your existing HTML to use Angular's *ngIf else structure. This lets you render the schedule slots only when they exist, and show the fallback message otherwise:

<div *ngFor="let date of dates; let z = index" class="dateBox">
  <!-- Render schedule slots only if the date has available times -->
  <div *ngIf="hasAvailableSchedules(date); else noScheduleTemplate">
    <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>

  <!-- Fallback template for dates with no schedules -->
  <ng-template #noScheduleTemplate>
    <div class="no-schedule-message">No available schedules</div>
  </ng-template>
</div>

Alternative: Inline Expression (No Component Method Needed) #

If you prefer not to add a component method, you can directly embed the check in the template:

<div *ngIf="ScheduleTime.some(time => time.date === date); else noScheduleTemplate">
  <!-- Existing schedule slot rendering -->
</div>

Step 3: Style the Fallback Message (Optional) #

Add some CSS to make the fallback message look polished:

.no-schedule-message {
  text-align: center;
  color: #666;
  padding: 1.5rem;
  font-style: italic;
  background-color: #f8f9fa;
  border-radius: 4px;
}

Quick Notes #

• I renamed your Date loop variable to lowercase date to avoid conflicts with JavaScript's built-in Date object—small change but improves code readability!
• The some() method efficiently checks if at least one entry in ScheduleTime matches the current date, so it's perfect for this use case.

内容的提问来源于stack exchange，提问作者Shubham Sharma