html - ionic 3 中的聊天 UI

Question

我尝试创建一个聊天 UI。我在放置聊天气泡时遇到了问题。它就像

这是我的 HTML 代码

<ion-list no-lines class="msgbubble" *ngFor="let msg of messages">
    <div class="innermsg left" *ngIf="userId != msg.id">
      {{ msg.reply }}
    </div>
    <div class="innermsg right" *ngIf="userId == msg.id">
        {{ msg.reply }}
    </div>
</ion-list>

这是我的scss代码

.innermsg {
        display: inline-block;
        padding: 5px 10px;
        margin: 5px;
        font-weight: 500;
        font-size: 16px;
        border-radius: 15px;
        margin-bottom: 5px;
    }

    .innermsg.left {
        float: left;
        background-color: #F1F0F0;
        color: black;
    }

    .innermsg.right {
        float: right;
        //margin-right: 10%;
        background-color: #0084FF;
        color: white;
    }

    .msgbubble {
        margin-bottom: 10px;
    }

谁能帮我一个接一个地显示聊天气泡，但不要像上图那样在同一行。

Answer 1

HTML 结构需要稍微改变一下，每个聊天气泡需要占一行，只有行内的内容必须具有您的格式。

像这样:

  <ion-list no-lines class="msgbubble" >
    <ion-item *ngFor="let msg of messages">
      <span [ngClass]="userId == msg.id ? 'innermsg right':'innermsg left'">{{ msg.reply }}</span>
    </ion-item>
  </ion-list>

检查执行 here