이온 2 쇼 메시지 템플릿 문제

Question

이온 2를 사용 중이며 채팅 앱을 만들고 있습니다. 문제는 : 나는 아래 현재 사용자 측 메시지 표시하지 빛 메시지 오른쪽 파란색 메시지 옆에 측면에서 새로운 MSG를 추가하면

<div class="message-wrapper" *ngFor="let item of items | async" > 

     <div *ngIf="email === (item)?.email">     
      <div class="chat-bubble right"> 
       <div class="message" autolinker>{{item.text}}</div> 
         <div class="message-detail"> 
          <span am-time-ago="message.date" class="bold" >{{item.timestamp | MomentDate:"LLLL" }}</span> 
         </div> 
       </div> 
      </div> 

      <div *ngIf="email !== (item)?.email"> 
       <div class="chat-bubble left"> 
        <div class="message" autolinker>{{item.text}}</div> 
         <div class="message-detail"> 
          <span am-time-ago="message.date" class="bold">{{item.timestamp | MomentDate:"LLLL" }}</span> 
         </div> 
       </div> 
      </div> 
     <div class="cf"></div> 
</div> 

이의 그림에 나타낸 바와 같이 할 수있는 실시간 채팅으로 서로 아래의 메시지를 표시하는 방법 ...

Answer 1

난 당신이 다음과 같이 당신의 HTML을 변경해야 할 생각 :

<div class="chat-bubble" [ngClass]="{right:email === (item)?.email, left:email !== (item)?.email}"> 
    <div class="message" autolinker>{{item.text}}</div> 
    <div class="message-detail"> 
     <span am-time-ago="message.date" class="bold" >{{item.timestamp | MomentDate:"LLLL" }}</span> 
    </div>   
    </div> 
</div>