Html – NgFor Doesn't print data from fully populated array of objects

HERE IS THE IMAGE
So here is the problem. I have an array that stores data received from API. Data are messages.

Down below is TS file of component in which I want to print all messages.
There is no error, so I don’t have anything to work with. Array is full and populated with data. So there is no talking about it.

Here is a TS file of component in which I want to print that data.

import { HttpErrorResponse } from '@angular/common/http';
import { Component } from '@angular/core';
import { Messages } from 'src/app/Data Transfer Objects/Messages';
import { MessagesService } from 'src/app/services/messages.service';

@Component({
  selector: 'app-all-messages',
  templateUrl: './all-messages.component.html',
  styleUrls: ['./all-messages.component.scss']
})
export class AllMessagesComponent {
    private readonly _messageService:MessagesService 
    messageObject:Messages;
    constructor(private messagesService:MessagesService){
        this._messageService = messagesService;
        this.messageObject = new Messages();
    }

    ngOnInit():void{
      this.loadMessages();
    }

    loadMessages(){
      let username = localStorage.getItem("Username")
      this._messageService.getUserMessages(username).subscribe(response=>{
          this.messageObject.Messages = response;
          console.log(this.messageObject.Messages);
      }, (error:HttpErrorResponse)=>{
        console.log(error);
      })
    }
}

Next one is HTML file with ngFor:

<app-heder></app-heder>
<div class="messages-container">
   <div class="all-users">
      <div class="message-wrapper" *ngFor="let message of messageObject.Messages">
         <div>
            <h1>
               {{message.Message}}
            </h1>
         </div>
      </div>
   </div>
   <div class="message-preview">
        <app-user-to-user-messages></app-user-to-user-messages>
   </div>
</div>