s202226701040/smarteat-app/src/app/asy/asy.component.html

<ion-header>
  <ion-toolbar>
    <ion-title>{{ dishDetails.title }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-card>
    <ion-card-header>
      <ion-card-title>{{ dishDetails.title }}</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <!-- 食谱图片 -->
      <ion-img [src]="dishDetails.image_url">
        <!-- 使用备用的 <img> 元素来处理 alt 属性 -->
        <img [src]="dishDetails.image_url" [alt]="dishDetails.title">
      </ion-img>
      
      <!-- 食材 -->
      <h3>食材:</h3>
      <p [innerHTML]="dishDetails.ingredient"></p> <!-- 使用 [innerHTML] 渲染带 <br> 的 HTML -->

      <!-- 制作方法 -->
      <h3>制作方法:</h3>
      <p [innerHTML]="dishDetails.instructions"></p> <!-- 使用 [innerHTML] 渲染带 <br> 的 HTML -->

      <!-- 小贴士 -->
      <h3>小贴士:</h3>
      <p [innerHTML]="dishDetails.tips"></p> <!-- 使用 [innerHTML] 渲染带 <br> 的 HTML -->
    </ion-card-content>
  </ion-card>
</ion-content>