离子2显示消息模板问题

Question

我正在使用离子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>