List is not binding properly, getting list null

I have a problem regarding list binding in the web app with firebase and angular7. The problem is as follows:

1-> I want to get list of users for and I am getting them and I am pushing them into a list, and the structure of the list shows my class name there

I have tried a sample static injection where I am not getting class name as an object in the list and that is binded, and now I dont know what can I try.

This is my Component.ts

    export class UserInboxComponent implements OnInit {
      // InboxList: Array<GetInboxListModel>;
      public InboxList: Array<GetInboxList22>;
      constructor(private userInbox: UserInboxService, private authService: AuthService, private db: AngularFireDatabase) {
        this.InboxList = new Array<GetInboxList22>();
      }

      ngOnInit() {
          const path = `Users/${userId}/Conversation`;
          this.getUserPath(path);
      }

      async getUserPath(path: string) {
        this.db.database.ref(path).on('child_added', async (snapshot) => {
          const snap = snapshot.val();
          this.getInboxList2(snap.ChatId, snap.UserId);   
        });
      }

      getInboxList2(chatId: string, userId: string) {
        const path = `${DatabasePath.Conversations}/${chatId}`;
        const inboxObject = new GetInboxList22();
        this.db.object(path).query.once('value')
          .then(async conversation => {
            const userPath = `${DatabasePath.Users}/${userId}`;
            const userDetail = await firebase.database().ref(userPath).once('value')
              .then(snapshot => {
                return snapshot.val();
              });
            inboxObject.ChatId = chatId;
            inboxObject.DisplayName = userDetail.DisplayName;
            inboxObject.GroupConversationId = conversation.child('GroupConversationID').val();
            inboxObject.GroupName = conversation.child('GroupName').val();
            inboxObject.IsRead = conversation.child('LastMessage').child('isRead').val();
            inboxObject.Message = conversation.child('LastMessage').child('Message').val();
            inboxObject.MessageDisplayTime = conversation.child('LastMessage').child('MessageTime').val();
            inboxObject.MessageTime = conversation.child('LastMessage').child('MessageTime').val();
            inboxObject.ProfileImage = userDetail.ProfileImage;
            inboxObject.ReceiverId = conversation.child('ReceiverId').val();
            inboxObject.SenderId = conversation.child('SenderId').val();
            return this.InboxList.push(inboxObject);
          });
      }

      async getUserDetail(userId: string) {
        const path = `${DatabasePath.Users}/${userId}`;
        return await this.db.object(path).query.once('value').then(snap => {
          return snap.val();
        });
      }
    }

This is my html

    <ul *ngIf="InboxList.length > 0">
        <li class="contact" *ngFor="let item of InboxList">
            <div class="wrap">
                <!--[ngClass]="{'unread-message' : (item.IsRead == false && item.SenderId != User.UserId)}"-->
                <img [src]="item.ProfileImage" *ngIf="item.ProfileImage != '' && item.ProfileImage != null" [alt]="item.DisplayName" />
                <!-- <img [src]="data:image/JPEG;base64,noImageBase64" ng-image-appear placeholder *ngIf="item.ProfileImage == '' || item.ProfileImage == null" alt="" /> -->
                <div class="meta">
                    <p class="message-time"></p>
                    <p class="name"></p>
                    <p class="converation-group-name"></p>
                    <p class="preview"></p>
                    <!-- [ngClass]="{'un-read-message': (item.IsRead == false && item.SenderId != User.UserId)}"-->
                </div>
            </div>
        </li>
    </ul>
    <ul *ngIf="InboxList.length == 0">
        <li class="contact text-center">
            <div class="wrap">
                <div class="meta">
                    <p class="name">No Conversations Found</p>
                </div>
            </div>
        </li>
    </ul>

Expected Result as this will be binded

InboxList = [{
ChatId: "id"
DisplayName: "name"
GroupConversationId: "id"
GroupName: "id"
IsRead: false
Message: "msg"
MessageDisplayTime: "time"
MessageTime: "time"
ProfileImage: "img"
ReceiverId: "id"
SenderId: "id"}]

Dont know from where I am getting my CLass name here 'GetInboxList22'

This is the result

InboxList = [GetInboxList22{
ChatId: "id"
DisplayName: "name"
GroupConversationId: "id"
GroupName: "id"
IsRead: false
Message: "msg"
MessageDisplayTime: "time"
MessageTime: "time"
ProfileImage: "img"
ReceiverId: "id"
SenderId: "id"}]