イオン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> 

は、PICに示されているようにすることができる任意の実際のチャットのように互いに以下のメッセージを表示する方法...

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>