Проблемы с сообщениями от разных пользователей на одной стороне

Question

Я создаю приложение, в котором есть два типа пользователей: пассажиры и водители. Я добавляю интерфейс чата в приложение. Пользователи отправляют и получают сообщения. Однако они отображаются на одной стороне, а имя пользователя не отображается над сообщением. Мне нужно, чтобы сообщения отправителя находились слева, а полученные сообщения - справа. Я просмотрел много уроков для приложений чата, но не могу найти того, который решит мою проблему. Я использовал следующий урок, чтобы узнать, где я сейчас нахожусь: https://github.com/mehulmpt/ionic-firebase-chat

Сообщения чата

Вот мой исходный код:

Я удалил часть своего исходного кода, чтобы, надеюсь, быть более кратким. Я включил весь код, где я считаю, что ошибка может быть

export class ChatPage {
  
  //creates string variables where navParam values can be stored.
  username: string="";
  rideID: string="";
  message: string="";
  _chatSubscription;
  messages: object[]=[];

  constructor(navCtrl: NavController, public navParams: NavParams) {
    //navParams values from previous page is stored
    this.username = this.navParams.get('username');
    this.rideID = this.navParams.get('requestID');
    
    //references database and creates a new child where messages can be stored
    this._chatSubscription = firebase.database().ref().child(`Rides/${this.rideID}/Messages`).on('value', snapshot => {
      let tmp = [];
      snapshot.forEach( data => {
        tmp.push({
  		  key: data.key,
  		  name: data.val().username,
          message: data.val().message,
          sendDate: Date()
        });
        return false;
       });
       this.messages = tmp;
       console.log(this.messages);
    });
  }

  send(){
    //sends the messages to the child Messages
    firebase.database().ref().child(`Rides/${this.rideID}/Messages`).push().set({
      username: this.username,
      message: this.message,
      sendDate: Date()
    }).then(()=>{
      //message is sent
    }).catch(() => {
      //some error message
    })
    
    this.message = '';
   }

  

page-chat {
	.innerMessage {
		display: inline-block;
		padding: 5px 10px;
		background: color($colors, 'primary');
		margin: 5px;
		color: white;
		border-radius: 3px;
	}
	.innerMessage.messageRight {
		background: color($colors, 'secondary');
	}
	.username {
		font-weight: bold;
		font-size: 80%;
	}
	.message {
		font-size: 120%;
	}
	.message:after {
		content: '';
		display: block;
		clear: both;
	}
	.messageLeft {
		float: left;
	}
	.messageRight {
		float: right;
	}

	.message.special .innerMessage .messageContent{
		background: white;
		display: inline-block;
		padding: 0 10px;
	}

	.message.special .innerMessage:before{
		content: '';
		height: 2px;
		background: #eee;
		display: block;
		top: 50%;
		position: absolute;
		left: 0;
		width: 100%;
		z-index: -1;
	}

	.message.special .innerMessage{
		background: transparent;
		color: black;
		font-size: 80%;
		width: 100%;
		float: none;
		text-align: center;
		position: relative;
	}
}

<ion-content padding>
 <div id="chatMessages">
  <div *ngFor="let message of messages" [class]="message.specialMessage ? 'message special' : 'message'">
    <div [class]="message.username == username ? 'innerMessage messageRight' : 'innerMessage messageLeft'">
      <div class="username">{{ message.username }}</div>
      <div class="messageContent">{{ message.message }}</div>
    </div>
  </div>
</div>
</ion-content>

Answer 1

Я не знаю, может ли атрибут класса быть связан с троичным оператором. Вы можете попробовать что-то подобное в вашем цикле ngFor

    <div *ngFor="let message of messages">
      <ng-container *ngIf='message.username == username'>  //Checking true
         <div class='innerMessage messageRight'>
           <div class="username">{{ message.username }}</div>
           <div class="messageContent">{{ message.message }}</div>
         </div>
      </ng-container>

      <ng-container *ngIf='message.username != username'> //Checking false
         <div class='innerMessage messageLeft'>
           <div class="username">{{ message.username }}</div>
           <div class="messageContent">{{ message.message }}</div>
         </div>
      </ng-container>
    </div>