如何更改ngfor內部各個元素的類？

如果這個問題已被回答，我很抱歉，但我無法找到合適的答案。我試圖創建一個簡單的聊天應用程序，並希望當前用戶發送的消息出現在屏幕的右側，而來自其他用戶的消息將出現在左側。如何更改ngfor內部各個元素的類？

我相信我是這種方式的大部分，但它不能正常工作，如果最近的消息是由當前用戶發送的，那麼所有的消息將在正確的反之亦然，從其他用戶的消息。

我的問題更詳細的是，有沒有辦法讓我改變由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變量與我的組件類這個變量控制簡單，這種改變爲既當需要時「消息自我」或「消息其他」

styleClass = '';

固定：如果有人發現這個問題有類似的問題，我的問題是通過使用個人消息屬性，它保存發件人ID，如果它是當前用戶ID相同，然後應用我想要的樣式，這是通過dfsq的建議發現的，感謝GünterZöchbauer，因爲他的建議也是正確的

來源

2017-01-02 Charles Webb

請發表您的代碼演示您嘗試來完成你試過了，什麼什麼，在哪裏，你失敗了。 –

我現在正在嘗試這個，謝謝 –

我已經添加了與該問題有關的代碼 –

在這種情況下你應該做的是比較當前已認證的已用ID和消息ID，它應該是發件人使用的ID。然後，你ngClass是這個樣子：

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

來源

2017-01-02 15:14:43 dfsq

如何更改ngfor內部各個元素的類？

回答

相關問題