Как изменить класс отдельных элементов внутри 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 = '';

Исправлено:: В случае, если кто-либо находит этот вопрос с аналогичной проблемой, моя проблема была исправлена с использованием свойства отдельных сообщений, в котором хранился идентификатор отправителей, и если он был таким же, как и текущий идентификатор пользователя, тогда примените тот стиль, который я хотел, это было обнаружено с помощью предложения dfsq, благодаря Günter Zöchbauer, поскольку его предложение было также правильным.

источник

2017-01-02 Charles Webb

Пожалуйста, разместите свой код, который демонстрирует, что вы пытаетесь выполнить, что вы пытались и где вы не смогли. –

Я пытаюсь это сейчас, спасибо –

Я добавил код, который имеет отношение к проблеме –

Что вы должны делать в таких случаях, как сравнение текущего идентификатора с идентификатором id, который должен быть идентификатором отправителя. Тогда вы ngClass выглядите примерно так:

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

источник

2017-01-02 15:14:43 dfsq

Как изменить класс отдельных элементов внутри ngfor?

ответ

Смежные вопросы