根据所需条件使用不同划分的问题

Question

我正在开发一个聊天应用程序。

我的应用程序中的问题是我无法根据条件

在不同的div之间切换（或使用）

我想确保如果用户名与 message.then 传出消息的用户名匹配 class division 应该显示，否则传入消息 class。这是我的 messageComponent.ts 文件

export class MessageComponent implements OnInit {
 @Input() chatMessage:MessageModel;
 ownMessage:boolean;
 userName:string;
 messageContent:string;

  constructor(public userService:UserServiceService) { }

  ngOnInit() {
  this.analyseMessage();
  }

  analyseMessage(){

    if(this.chatMessage.senderUsername == this.userService.username){
      console.log("username matches");  
      this.ownMessage=true;
    }else{
      console.log("username don't match!");
       this.ownMessage=false;
    }
  }

}

这里是html页面的代码

<div class="incoming_msg" *ngIf="!ownMessage" >
    <div class="incoming_msg_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>
    <div class="received_msg">
      <div class="received_withd_msg">
        <b>{{ chatMessage.senderUsername}}</b>
         &emsp;
        <p> {{ chatMessage.message }}</p>
    </div>
  </div>

  <div class="outgoing_msg" *ngIf="ownMessage">
    <div class="sent_msg">
      <p> {{ chatMessage.message }}</p>
  </div>

请大家帮我解决问题，帮我写出正确的代码。

Answer 1

可以通过*ngIf="true" && *ngIf="false"条件

实现

<div class="incoming_msg" *ngIf="chatMessage.senderUsername === userService.username" >
<div class="incoming_msg_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>
<div class="received_msg">
  <div class="received_withd_msg">
    <b>{{ chatMessage.senderUsername}}</b>
     &emsp;
    <p> {{ chatMessage.message }}</p>
 </div>
</div>

<div class="outgoing_msg" *ngIf="chatMessage.senderUsername !== userService.username">
<div class="sent_msg">
  <p> {{ chatMessage.message }}</p>
</div>

或

*ngIf="show; else notShow" 第二种方式

<div class="incoming_msg" *ngIf="chatMessage.senderUsername === userService.username"; else sentMsg>
<div class="incoming_msg_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>
<div class="received_msg">
  <div class="received_withd_msg">
    <b>{{ chatMessage.senderUsername}}</b>
     &emsp;
    <p> {{ chatMessage.message }}</p>
 </div>
</div>

<div class="outgoing_msg" #sentMsg>
<div class="sent_msg">
  <p> {{ chatMessage.message }}</p>
</div>

根据所需条件使用不同划分的问题

problem using different division according to condition required

angular-template

angular