html - 接收方和发送方的 NgClass 聊天，同时以替代方式显示聊天

Question

如果我收到一条消息，我的头像和消息应该在左边，如果我发送一条消息，我的头像和消息应该在右边。我怎么能用这个功能做到这一点？或者有人可以告诉我这些变化吗？

<div *ngFor="let message of allfinanceMsg" class="pb-4">
  <div [ngClass]="(message.MESSAGE_FROM === 'FINANCE') ? 'send-content' : 'receive-content'" class="col-md-12 d-flex"> {{message.MESSAGE}}
    <p [ngClass]="(message.MESSAGE_FROM === 'USER') ? 'send-date' : 'receive-date'" class="d-flex col-md-12"> {{message.CREATED_DATE | date : 'EEE MMM dd, h:mm a'}}
  </div>
</div>

标签： htmlangularperformanceangular-ui-bootstrap