Список не является обязательным, получая список ноль

Question

У меня проблема с привязкой списка в веб-приложении с firebase и angular7. Проблема заключается в следующем:

1-> Я хочу получить список пользователей, и я получаю их, и я помещаю их в список, и структура списка показывает мое имя класса там

Я попробовал образец статической инъекции, где я не получаю имя класса в качестве объекта в списке, и это связано, и теперь я не знаю, что я могу попробовать.

Это мой 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();
        });
      }
    }

Это мой 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="{{item.DisplayName}}" /> -->
                <div class="meta">
                    <p class="message-time">{{item.MessageDisplayTime}}</p>
                    <p class="name">{{item.DisplayName}}</p>
                    <p class="converation-group-name">{{item.GroupName == null || item.GroupName == '' ? '' : ( item.GroupName )}}</p>
                    <p class="preview">{{item.Message}}</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>

Ожидаемый результат, так как это будет связано

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

Не знаю, откуда я получаю свое имя CLass здесь 'GetInboxList22'

Это результат

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