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