*ngFor 显示的 Angular <p> 不会向右浮动

Question

我在聊天中尝试将样式应用于 “聊天容器”。

消息与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:left或float:right，具体取决于发送每条消息的用户。但是，它们总是显示在左侧。

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

Answer 1

<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;
}

在父 div 上使用 width 来覆盖可用的 space。（您可以使用 px 或 % 来设置宽度）

Angular <p> displayed by *ngFor won't float to the right