1

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

ここに画像の説明を入力

写真に示すように、下の現在のユーザー側のメッセージ表示から新しいメッセージを追加すると、ライトメッセージの直後ではなくすぐ隣の青いメッセージは、実際のチャットのように互いに下にメッセージを表示する方法があります...

4

1 に答える 1

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>
于 2016-08-26T13:18:30.880 に答える