app-recipe/myapp/src/app/tab3/page-collections/page-collections.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/"></ion-back-button>
    </ion-buttons>
    <ion-title>我的收藏</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <!-- 收藏列表 -->
  <ion-list>
    <ion-item-sliding *ngFor="let item of recipeFavoriteList">
      <ion-item  (click)="goToDetail(item.id)">
        <ion-thumbnail slot="start">
          <img [src]="item.get('imageUrl')" [alt]="item.get('title')">
        </ion-thumbnail>
        <ion-label>
          <h2>{{ item.get('title') }}</h2>
          <p *ngIf="item.get('favoriteTime')">收藏时间: {{ item.get('favoriteTime') | date:'yyyy-MM-dd' }}</p>
        </ion-label>
        <ion-icon name="heart" slot="end" color="danger"></ion-icon>
      </ion-item>
      <ion-item-options side="end">
        <!-- <ion-item-option color="danger" (click)="removeCollection(item.id)">
          <ion-icon name="trash" slot="icon-only"></ion-icon>
        </ion-item-option> -->
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>

  <!-- 空状态提示 -->
  <div class="empty-state" *ngIf="recipeFavoriteList.length === 0">
    <ion-icon name="heart-outline"></ion-icon>
    <h3>暂无收藏记录</h3>
    <p>您收藏的菜品将会显示在这里</p>
  </div>
</ion-content>