CampusHelp/myapp/src/app/tab4/tab11/tab11.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      <ion-grid>
        <ion-row>
          <ion-col size="2">
            <ion-avatar>
              <ion-img *ngIf="publishedItems.length > 0" [src]="publishedItems[0].headImage" class="avatar"></ion-img>
              <ion-icon *ngIf="publishedItems.length === 0" name="person-circle-outline" class="default-avatar"></ion-icon>
            </ion-avatar>
          </ion-col>
          <ion-col size="5">
            <ion-label>
              <ion-note>{{publishedItems.length > 0 ? publishedItems[0].publisher : 'tab11'}}</ion-note>
              <p>发布时间: {{publishedItems.length > 0 ? publishedItems[0].timestamp : 'N/A'}}</p>
            </ion-label>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col size="12">
            <h2>{{publishedItems.length > 0 ? publishedItems[0].title : 'tab11'}}</h2>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <!-- 显示信息的部分 -->
    <ion-item *ngFor="let item of publishedItems">
      <ion-label>
        <h2>问题: {{item.content}}</h2>
      </ion-label>
    </ion-item>
  </ion-list>
  <ion-item *ngFor="let item of publishedItems">
    <ion-list>
      <!-- 显示回复内容 -->
      <p>对话内容:</p>
      <div *ngIf="item.replies && item.replies.length > 0">
        <ul>
          <li *ngFor="let reply of item.replies">
            <p>{{reply.floor}} 楼 {{reply.sender}}: {{reply.content}}</p>
          </li>
        </ul>
      </div>
    </ion-list>
  </ion-item> 
  <ion-list> 
    <!-- 回复框 -->
    <ion-item *ngFor="let item of publishedItems">
      <ion-item>
        <ion-textarea placeholder="输入回复内容" [(ngModel)]="replyContent"></ion-textarea>
      </ion-item>
      <ion-button (click)="submitReply(item)">提交回复</ion-button>
    </ion-item>
  </ion-list>
  <!-- 返回按钮 -->
  <!-- <ion-button (click)="goBackToTab1()">返回</ion-button> -->
</ion-content>