条件 CSS 类

Question

我使用的是 Ionic 2，并且有以下 html 代码：

<ion-content padding class="messages-page-content">
    <ion-scroll scrollY="true" class="messages">
        <ion-list>
            <ion-item class="message-item" *ngFor="let item of firelist | async">
                <div [class]="'message message-me'">
                    <div class="message-content">{{item.message_text}}</div>
                    <span class="time-tick">
                        <span class="message-timestamp">{{item.timestamp | amDateFormat: 'DD MMM YYYY  h:mm a'}}</span>
                        <div *ngIf="showTick(message) === true">
                            <span class="checkmark">
                                <div class="checkmark_stem"></div>
                                <div class="checkmark_kick"></div>
                            </span>    
                        </div>
                    </span>
                </div>
            </ion-item>
        </ion-list>
    </ion-scroll>
</ion-content>

如果你特别看这一行：

<div [class]="'message message-me'">

我希望能够动态更改类。

例如，像这样的东西，但我无法让它工作：

<div [class]="{{item.memberId === me.memberId ? 'message message-me' : 'message message-you'}}">

其中me 在支持ts 文件中定义。

欢迎任何建议。

更新

根据下面概述的here 建议，我尝试以下方法：

    <div [class]="{'message message-me' : (item.uid == me.uid), 'message message-you':(item.uid === you.uid)}">

现在，我只是丢失了所有格式，但没有错误。对象item.uid 和me.uid 确实存在。

原码：

<div [class]="'message message-me'">

更新

以下类型的作品：

<div [ngClass]="{'message message-you':(item.uid === you.uid), 'message message-me':(item.uid === me.uid)}">

我有一个满足两个条件的列表，但只有右手条件是应用样式。如果我交换左右条件，则另一种样式有效，因此这表明数据没有问题，而是 html。

如果我将其更改为：

<div [ngClass]="{'message message-me':(item.uid === me.uid), 'message message-you':(item.uid === you.uid)}">

我明白了：

我也试试：

    <div [ngClass]="{'message message-me':(item.uid != you.uid), 'message message-you':(item.uid === you.uid)}">

为了证明数据没有问题，但只应用了右手类。

Answer 1

为什么不直接使用我认为更容易阅读的语法：

<div [class.Myclass]="my-condition">

在你的情况下，这看起来像这样：

<div class="message" [class.message-me]="item.memberId === me.memberId" [class.message-you]="item.memberId !== me.memberId">

所以“message”类是无条件应用的，而message-me和message-you类是有条件应用的

Answer 2

似乎有点小技巧，因为我需要两个 ngClass，但这可行：

  <div [ngClass]="{'message message-me':(item.uid == me.uid)}">
    <div [ngClass]="{'message message-you':(item.uid == you.uid)}">
                <div class="message-content">{{item.message_text}}</div>
                <span class="time-tick">
                    <span class="message-timestamp">{{item.timestamp | amDateFormat: 'DD MMM YYYY  h:mm a'}}</span>
                    <div *ngIf="showTick(item) === true">
                        <span class="checkmark">
                            <div class="checkmark_stem"></div>
                            <div class="checkmark_kick"></div>
                        </span>
                    </div>
                </span>
            </div>
        </div>