Question

如果这个问题得到解答，我很抱歉，但我找不到合适的答案。我正在尝试创建一个简单的聊天应用程序，并希望当前用户发送的消息显示在屏幕的右侧，而其他用户的消息将显示在左侧。

我相信我大部分都是这样，但是它不能正常运行，如果最新消息是由当前用户发送的，那么所有消息都将在右侧，反之亦然，来自其他用户的消息。

我的问题更详细的问题是，有没有办法让我更改由ngFor生成的列表项的类，每个元素可能与任何其他列表项具有不同的类。

以下是HTML：

    <ion-item *ngFor="let message of messages; let i = index" (click)="beingWhisper(message)">

    <ion-card [ngClass]="styleClass">
      <ion-card-header class="messageHeader">
        {{i}}{{message.Person}}
      </ion-card-header>
      <ion-card-content>
        {{message.Message}}
      </ion-card-content>
    </ion-card>

</ion-item>

这是最基本的CSS：

.message-other{
  float: left;
  width: 50%;
}
.message-self{
  float: right;
  width: 50%;
}

在我的组件类中使用此变量简单地控制ngClass变量，在需要时将其更改为“message-self”或“message-other”

    styleClass = '';

固定：如果有人发现这个问题有类似的问题，我的问题是通过使用单独的messages属性修复的，该属性保存了发件人ID，如果它与当前用户ID相同，则应用我想要的样式，这是通过dfsq发现的建议，感谢GünterZöchbauer，他的建议也是正确的

Answer 1

在这种情况下，您应该做的是将当前经过身份验证的已使用ID与消息ID进行比较，消息ID应该是发件人使用的ID。那么你的ngClass看起来像这样：

[ngClass]="message.userId === currentUser.id ? 'message-self' : 'message-other'"

如何在ngfor中更改单个元素的类别？

1 个答案: