ngfor内の個々の要素のクラスを変更するには？

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です：ngClass変数が私のコンポーネントクラスでこの変数を単純に制御されている

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

、これはどちらかに変更され必要に応じて「メッセージ - 自己」または「メッセージ - その他」

styleClass = ''; 

固定： 誰もがこの問題を似たような問題で見つけた場合は、送信者IDを保持している個々のメッセージプロパティを使用して問題を修正し、現在のユーザーIDと同じであれば、これはdfsqの提案によって発見されました.GünterZöchbauerのおかげで、彼の提案も正しいと確信しました。

Answer 1

このような場合は、現在認証されている使用済みIDとメッセージIDを比較する必要があります。次に、あなたはこのようなものを見ます：

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