Отображение AngularFireList в Angular 9

Question

Я использовал Django раньше, но я очень плохо знаком с Angular.

Я работаю над созданием приложения для обмена сообщениями один на один, используя Angular 9 и Firebase, и столкнулся с некоторыми проблемами. Мне нужно сделать сообщения на странице.

Я следовал этому уроку, но он довольно устарел и использовал Angular 2. Репетитор использовал FirebaseObjectObservable, а я использую AngularFireList<Model>.

Вот моя функция, которая получает список сообщений:

    getMessages(): AngularFireList<ChatMessage> 
{ // Function that returns the messages present.

    console.log('Calling getMessages()!') // Used for testing.

    return this.db.list('/messages', ref => {  return ref.limitToLast(25).orderByKey()  });// Ordering by Key, and serving 25 messages at one time only.  
  } 

Теперь все работает нормально, я вижу сообщения, добавляемые в мою базу данных firebase. Но когда я запускаю ng serve, я получаю следующую ошибку:

ERROR in src/app/feed/feed.component.html:2:33 - error TS2769: No overload matches this call.
      The last overload gave the following error.
        Argument of type 'AngularFireList<ChatMessage>' is not assignable to parameter of type 'Promise<any>'.
          Type 'AngularFireList<ChatMessage>' is missing the following properties from type 'Promise<any>': then, catch, [Symbol.toStringTag], finally

    2     <div *ngFor="let message of feed | async" class="message">
                                      ~~~~

      src/app/feed/feed.component.ts:9:16
        9   templateUrl: './feed.component.html',
                         ~~~~~~~~~~~~~~~~~~~~~~~
        Error occurs in the template of component FeedComponent.

Я не могу понять, в чем суть ошибки. Я никогда нигде не использовал Promise<any> (без каламбура).

Вот мой feed.component.ts:

@Component({
  selector: 'app-feed',
  templateUrl: './feed.component.html',
  styleUrls: ['./feed.component.scss']
})
export class FeedComponent implements OnInit, OnChanges {
  feed: AngularFireList<ChatMessage>; // Our feed of messages.
  constructor(private chat: ChatService) { }
  ngOnInit(): void {
    this.feed = this.chat.getMessages();
  }
  ngOnChanges() {
    this.feed = this.chat.getMessages();
  }
}

А вот мой feed.component.html:

<div class="feed">
    <div *ngFor="let message of feed | async" class="message">
      <app-message [chatMessage]=message></app-message>
    </div>
  </div>

А вот, message.component.ts:

@Component({
  selector: 'app-message',
  templateUrl: './message.component.html',
  styleUrls: ['./message.component.scss']
})
export class MessageComponent implements OnInit {

  @Input() chatMessage : ChatMessage; // Decorator.

  // Stuff which we want to get displayed.
  userEmail: string;
  userName: string;
  messageContent: string;
  timeStamp: string; 

  constructor() { }

  ngOnInit(chatMessage = this.chatMessage): void {
    this.messageContent = chatMessage.message;
    this.timeStamp = chatMessage.timeSent;
    this.userEmail = chatMessage.email;
    this.userName = chatMessage.userName;
  }
}

А вот и message.component.html

<div class="messageContainer">
    <p>{{userName}}</p>
    <p>{{messageContent}}</p>
    <p>{{timeStamp}}</p>
</div>

Любая помощь приветствуется! Пожалуйста, дайте мне знать, если вы хотите получить более подробную информацию.