improve chat

src/app/ui/chat/component/messages/messages.page.html

@@ -1,9 +1,9 @@
 <ion-header class="ion-no-border" >
   <ion-toolbar class="header-toolbar" >
-    <div class="main-header" *ngIf="roomData$ | async as roomData">
+    <div class="main-header">
       <div class="header-top">
         <div class="middle" >
-          <ion-label class="title"> {{ roomData.roomName }}</ion-label>
+          <ion-label class="title"  *ngIf="roomData$ | async as roomData"> {{ roomData.roomName }}</ion-label>
           <!-- <button (click)="ChatMessageDebuggingPage()">Dev</button> -->
           <span *ngIf="roomStatus$ | async as roomStatus"><ion-icon *ngIf="roomStatus" class="online" name="ellipse"></ion-icon></span>
         </div>
@@ -44,7 +44,7 @@
   <div class="messages height-100 width-100 d-flex flex-column" #scrollMe >
 
     <div
-    *ngFor="let message of messages1[roomId]" class="messages-list-item-wrapper"
+    *ngFor="let message of messages1[roomId]; let messageIndex = index" class="messages-list-item-wrapper"
     [ngClass]="{'my-message': message.sender.wxUserId === sessionStore.user.UserId, 'other-message': message.sender.wxUserId !== sessionStore.user.UserId}"
     >
     <div class="message-container">
@@ -67,7 +67,10 @@
             </div>
 
             <div *ngIf="attachment.fileType == MessageAttachmentFileType.Image">
-              <img [src]="attachment.safeFile">
+              <img  
+              [src]="attachment.safeFile"
+              (load)="onImageLoad(message, messageIndex)"
+              (error)="onImageError()">
             </div>
 
             <div *ngIf="attachment.fileType == MessageAttachmentFileType.Audio">