202226701051/fashion-app/src/app/post/post.component.html

<ion-content >
  <div class="post" *ngFor="let post of posts">
    <div class="post-header">
      <div class="avatar">
        <img [src]="post.get('user')?.image || 'https://tse1-mm.cn.bing.net/th/id/OIP-C.X-VG5gTN2ak8rGRij3oCogAAAA?rs=1&pid=ImgDetMain'" alt="User Avatar" class="avatar-image">
      </div>
      <div class="user-info">
        <span class="username">{{ post.get('user')?.username || "该用户还没有名字" }}</span>
        <ion-icon name="ellipsis-horizontal" class="more-icon"></ion-icon>
      </div>
    </div>
    <h2 class="post-title">{{ post?.get('title') }}</h2>
<!--标签-->
<div class="tag-container">
  <div class="tag" *ngFor="let tag of post.get('tag')">
    <ion-icon name="bookmark-outline" class="tagpicture"></ion-icon>{{ tag }}
  </div>
</div>

    <p class="post-content-text">{{ post?.get('content') }}</p>
    <div class="image-gallery">
      <img *ngFor="let image of post.get('image')" [src]="image" alt="Post Image" class="post-image">
    </div>

     <!-- 按钮区域 -->
     <div class="button-container">
      <ion-button fill="clear" class="action-button" >
        <ion-icon name="share-social-outline" class=""></ion-icon>
        <span>分享</span>
      </ion-button>
      <ion-button fill="clear" class="action-button">
        <ion-icon name="chatbubble-outline"></ion-icon>
        <span>评论</span>
      </ion-button>
      <ion-button fill="clear" class="action-button" (click)="toggleLike()">
        <ion-icon name="heart-outline" [name]="isLiked ? 'heart' : 'heart-outline'" [style.color]="isLiked ? 'red' : 'black'"></ion-icon>
        <span>点赞</span>
      </ion-button>
    </div>

  </div>
</ion-content>