Angular＆lt; p＆gt;由 *ngfor赢得冠军

Question

我进行了此聊天，我正在尝试将样式应用于“ chat-c​​ontainer” 。

这些消息以Angular的*NGFOR显示：仅

<p *ngFor="let m of messageArray" [ngClass]="this.currentUser.user._id==m.src?'self pr-3':'otherUser pl-3'">
   {{m.msg}}
</p>

应用的类仅具有float：左或 float：right 取决于发送的用户每个消息。但是，它们总是在左边显示。

关于如何使消息浮动到相应的一侧的任何建议吗？

Answer 1

使用 flexbox

<p *ngFor="let m of messageArray" [ngClass]="this.currentUser.user._id==m.src?'self pr-3':'otherUser pl-3'" class='message'>
   {{m.msg}}
</p>

在CSS上：

.message {
 display: flex;
 flex-flow: row nowrap;
 width: 100%;
}

.self {
 align-items: flex-end;
}

.otherUser {
 align-items: flex-start;
}

使用 width /em>在父级上覆盖可用空间。（您可以使用PX或％设置宽度）