APPmy/src/app/consult/consult.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/tabs/tab2"></ion-back-button>
    </ion-buttons>
    <ion-title>咨询</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-list lines="none">
    <ion-item *ngFor="let message of messages" [class]="message.sender === 'customer' ? 'customer-message' : 'designer-message'">
      <ion-avatar slot="start" *ngIf="message.sender === 'designer'">
        <img src="https://img.zcool.cn/community/01b1ae5c598973a801213f26e9319f.jpg@1280w_1l_2o_100sh.jpg">
      </ion-avatar>
      <ion-label>
        <ng-container *ngFor="let imageUrl of message.imageUrls">
          <img [src]="imageUrl">
        </ng-container>
        <p>{{ message.text }}</p>
        <p *ngIf="message.details">{{ message.details }}</p>
      </ion-label>
      <ion-avatar slot="end" *ngIf="message.sender === 'customer'">
        <img src="https://img.zcool.cn/community/015ac85f110b9fa801206621387957.png@1280w_1l_2o_100sh.png">
      </ion-avatar>
    </ion-item>
  </ion-list>

  <ion-footer>
    <ion-toolbar>
      <ion-input placeholder="请输入您想要询问的信息" [(ngModel)]="newMessage" (keyup.enter)="sendMessage()"></ion-input>
      <ion-button slot="end" (click)="sendMessage()">Send</ion-button>
    </ion-toolbar>
  </ion-footer>
</ion-content>