Ionic 如何根据条件将不同的scss类分配给div

evrscar2  于 2022-12-08  发布在  Ionic
关注(0)|答案(1)|浏览(166)

我有一个聊天应用程序,我试图显示来自X用户的消息在屏幕的右侧,而其他消息出现在左侧。

<ion-item *ngFor="let message of messages | slice: 0:messages.length" class="msg">
          <div *ngIf="this.message.user === this.user; else other" class="mine">
            <ion-row class="own">
              <ion-text color="tertiary"><b>{{ message.user }}: &nbsp;</b></ion-text>
              <ion-text color="secondary"> {{ message.text }}</ion-text>
            </ion-row></div>
          <ng-template #other>
            <ion-row class="other">
              <ion-text color="primary"><b>{{ message.user }}: &nbsp;</b></ion-text>
              <ion-text> {{ message.text }}</ion-text>
            </ion-row>
          </ng-template>
      </ion-item>
    </div>

我尝试使用displayflex,但我只移动了所有的消息,而不仅仅是我的

wribegjk

wribegjk1#

我猜是这样吧?

<ion-row [ngClass]="message.user === user ? 'own' : 'other'">
<ion-row [class]="message.user === user ? 'own' : 'other'">
<ion-row class="{{ message.user === user ? 'own' : 'other' }}">

相关问题