我创建了一个房间消息聊天与离子角，所有工作正常，但我有一个问题，在消息行为其他用户的消息，行工作正常，所有列显示在同一行，但我的消息的标志是显示在顶部作为第一行和其余的消息显示在第二行，哪里是问题？，

我的聊天页面. html：

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>Chat</ion-title>
    <ion-buttons slot="end">
      <ion-button fill="clear" (click)="signOut()">
        <ion-icon name="log-out" slot="icon-only"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">

  <ion-grid>
    <ion-row *ngFor="let message of messages ">

      <ion-col size="3" *ngIf="message.myMsg">
        <img [src]="message.userphoto" class="img-thumbnail" width="50" height="50">
      </ion-col>
      <ion-col size="9" class="message" [offset]="message.myMsg ? 3 : 0"
        [ngClass]="{ 'my-message': message.myMsg, 'other-message': !message.myMsg }">
        <b style="color: black;">{{ message.fromName }}</b> <img style="margin-left:5px;width:17px;"
          src="assets/antenna.png" alt="" srcset=""><br>
        <span>{{ message.msg }}
        </span>

        <div class="time ion-text-right"><br>{{ message.createdAt?.toMillis() | date:'short' }}</div>
      </ion-col>
      <ion-col size="3" *ngIf="!message.myMsg">
        <img [src]="message.userphoto" class="img-thumbnail" width="50" height="50">
      </ion-col>
    </ion-row>
  </ion-grid>


</ion-content>

<ion-footer>
  <ion-toolbar color="primary">
    <ion-row class="ion-align-items-center">
      <ion-col size="10">
        <ion-textarea style="color:black;border-radius: 5%;" placeholder="Aa" autoGrow="true" class="message-input"
          rows="1" maxLength="500" [(ngModel)]="newMsg">
        </ion-textarea>
      </ion-col>

      <ion-col size="2">

        <ion-button icon-only item-right (click)="sendMessage()" color="light">
          <ion-icon color="primary" name="send"></ion-icon>
        </ion-button>

      </ion-col>
    </ion-row>
  </ion-toolbar>
</ion-footer>

和我的CSS：

ion-content {
   
    --background: url('/assets/chatbg.jpg') 0 0/100% 100% no-repeat;
}
.message-input {
    width: 100%;
    border: 1px solid var(--ion-color-medium);
    border-radius: 6px;
    background: #fff;
    resize: none;
    margin-top: 0px;
    --padding-start: 8px;
}
 
.message {
    padding: 10px !important;
    border-radius: 10px !important;
    margin-bottom: 4px !important;
    white-space: pre-wrap;
}
 
.my-message {
    background:  var(--ion-color-primary);
    color: white;
    border-radius: 20%;
}
 
.other-message {
    background:  lightgray;
    color: black;
    border-radius: 20%;
}
 
.time {
    color: #dfdfdf;
    float: right;
    font-size: small;
}

我目标页面：

import { Component, OnInit, ViewChild } from '@angular/core';
import { IonContent } from '@ionic/angular';
import { Observable } from 'rxjs';
import { ChatService } from '../chat.service';
import { Router } from '@angular/router';
import { AngularFireStorage, AngularFireUploadTask } from '@angular/fire/compat/storage';
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/compat/firestore';
import { finalize, tap } from 'rxjs/operators';
export interface FILE {
  name: string;
  filepath: string;
  size: number;
}
@Component({
  selector: 'app-chat',
  templateUrl: './chat.page.html',
  styleUrls: ['./chat.page.scss'],
})

export class ChatPage implements OnInit {
  ngFireUploadTask: AngularFireUploadTask;

  progressNum: Observable<number>;

  progressSnapshot: Observable<any>;

  fileUploadedPath: Observable<string>;
  room: any;
  files: Observable<FILE[]>;
  ImgtoSend: any;
  FileName: string;
  FileSize: number;
  photo: string;
  isImgUploading: boolean;
  isImgUploaded: boolean;
  photos: any = [];
  private ngFirestoreCollection: AngularFirestoreCollection<FILE>;

  @ViewChild(IonContent) content: IonContent;

  messages: any = [];
  newMsg = '';
  users: any = [];
  constructor(private angularFirestore: AngularFirestore,
    private angularFireStorage: AngularFireStorage, private chatService: ChatService, private router: Router) {
    this.isImgUploading = false;
    this.isImgUploaded = false;

    this.ngFirestoreCollection = angularFirestore.collection<FILE>('filesCollection');
    this.files = this.ngFirestoreCollection.valueChanges();

  }

  async ngOnInit() {

    return (await this.chatService.getChatMessages()).subscribe(res => {
      this.messages = res.filter(a => a.fromName != "Deleted");
      this.messages.forEach(m => {
        console.log(m.from);
      });
    }
    );


  }

  getphotoOfUsers(uid) {
    console.log(uid);
    return this.chatService.getUsers().then(res => {
      res.subscribe(result => {
        this.photo = result.filter(a => a.uid == uid).map(a => a.photo).toString();
        console.log("photo" + this.photo);

      }
      )
    }
    )
  }
  sendMessage() {

    this.chatService.getUsers().then(res => {
      res.subscribe(result => {
        this.photo = result.filter(a => a.uid == this.chatService.currentUser.uid).map(a => a.photo).toString();
        console.log("photo" + this.photo);
        this.chatService.addChatMessage(this.newMsg, this.photo).then(() => {
          this.newMsg = '';
          this.content.scrollToBottom();
        });
      }
      )
    });

  }







}