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

看起来有点像黑客，因为我需要有两个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>

Answer 2

为什么不只使用这种语法，我认为它更容易阅读：

<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类被有条件地应用

条件CSS类

2 个答案: