来自不同用户的消息在同一侧的问题

Question

我正在构建一个应用，其中有两种类型的用户：乘客和司机。我正在向应用程序添加聊天界面。用户正在发送和接收消息。但是，它们出现在同一侧，并且用户名未显示在消息上方。我需要发件人的消息在左侧，而收到的消息在右侧。我查看了很多关于聊天应用程序的教程，但我找不到可以解决我的问题的教程。我使用以下教程来了解我现在的位置：https://github.com/mehulmpt/ionic-firebase-chat

Chat Messages

这是我的源代码：

我删除了一些源代码，希望更简洁。我已经包含了我认为可能出现错误的所有代码

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>