ionic 2 显示消息模板问题

Question

我正在使用 ionic 2 并制作聊天应用程序。问题是：

 <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>