NgFor 不打印完全填充的对象数组中的数据

Question

这是图片 所以问题就在这里。我有一个数组，用于存储从 API 接收的数据。数据就是消息。

下面是我要打印其中所有消息的组件的 TS 文件。 没有错误，所以我没有任何东西可以处理。数组已满并填充了数据。所以没啥可说的了。

这是一个组件的 TS 文件，我想在其中打印该数据。

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);
      })
    }
}

下一个是带有 ngFor 的 HTML 文件：

<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>

Answer 1

大小写很重要，应该全部小写

message

。

 <div class="message-wrapper" *ngFor="let message of messageObject.Messages">
     <div>
        <h1>
           {{message.message}}
        </h1>
     </div>
  </div>