<ion-header>
  <ion-toolbar>
    <ion-title>评论</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="comment-section">
  <ion-list>
    <div *ngFor="let comment of commentList">
      <div>
      <div class="avatar-container">
<ng-container *ngIf="getuserByComment(comment)">
          <ion-avatar class="avatar">
          <img [src]="getuserByComment(comment)?.get('avatar') || avatarUrl" alt="avatar">
          </ion-avatar>
            <div class="user-info">
          <ion-label class="username">{{   getuserByComment(comment)?.get('username') ||'unkown user'}}</ion-label>
        </div>
</ng-container>

        </div>
        <div class="content">
        <p>{{ comment?.get('content') }}</p>
        </div>
  
  </div> 

</div>
  </ion-list>
</ion-content> 

<div class="send-comment">
    <ion-item>
      <ion-input [value]="commentData['content']" (ionChange)="commentDataChange('content',$event)"  placeholder="写下你的评论..."></ion-input>
      <ion-button (click)="sendComment()" fill="clear">发送</ion-button>
    </ion-item>
  
  </div>