Angular：仅在选择第一个日期后显示第二个日期字段

方案一：新增状态标记变量（最直观） #

在FlightSelectionService里新增一个布尔类型的状态变量，专门标记第一个日期是否已被用户修改：

// FlightSelectionService.ts
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class FlightSelectionService {
  startingDate: Date = new Date();
  endingDate: Date = new Date();
  // 新增状态标记，初始为false
  isStartingDateModified = false;
}

然后在step1的p-calendar组件上绑定onSelect事件，用户选择日期时更新这个标记：

<!-- step1 区域的日期选择器 -->
<p-calendar 
  [(ngModel)]="flightService.startingDate"
  (onSelect)="flightService.isStartingDateModified = true"
  placeholder="选择出发日期"
></p-calendar>

最后用这个标记控制step2区域的显示：

<!-- step2 区域，仅在第一个日期被选择后显示 -->
<div *ngIf="flightService.isStartingDateModified">
  <p-calendar 
    [(ngModel)]="flightService.endingDate"
    placeholder="选择返程日期"
  ></p-calendar>
</div>

方案二：比较日期时间戳（无需新增变量） #

利用Date对象的getTime()方法获取时间戳（数字类型），通过比较两个日期的时间戳是否不等来判断第一个日期是否被修改：

<!-- step2 区域，通过时间戳比较控制显示 -->
<div *ngIf="flightService.startingDate.getTime() !== flightService.endingDate.getTime()">
  <p-calendar 
    [(ngModel)]="flightService.endingDate"
    placeholder="选择返程日期"
  ></p-calendar>
</div>

注意：如果用户手动把第一个日期改回初始的当前时间，step2会隐藏，这符合常规逻辑；如果业务允许用户重置后仍保留step2显示，方案一更适配需求。

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