проблема с использованием другого деления в зависимости от требуемого условия - PullRequest
Новая
       22

проблема с использованием другого деления в зависимости от требуемого условия

0 голосов
/ 08 января 2020

я занимаюсь разработкой приложения для чата.

проблема в моем приложении заключается в том, что я не могу переключаться между (или использовать) разные div в соответствии с условием

я хочу убедиться, что если имя пользователя совпадает с именем пользователя сообщения. то должно быть отображено разделение класса исходящего сообщения, иначе класс входящего сообщения. вот мой файл 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 page 

<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>

, пожалуйста, помогите мне решить проблему и напишите правильный код.

1 Ответ

0 голосов
/ 08 января 2020

Вы можете реализовать с помощью * 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; иначе notShow" 2-й способ 

<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>
...