Как показать содержимое объекта под объектом в базе данных Firebase с помощью * ngFor

Question

У меня есть эта структура базы данных

Я хочу иметь богатый replyMessage, есть эта ошибка "Невозможно найти другой поддерживающий объект '[объект Object]' типа 'Ed'. NgFor поддерживает только привязку к итерируемым объектам, таким как массивы. "

Как сделать итераторы replyMessage. Сообщения, полученные по снимку ....

TS.

import {Component, Injectable, OnInit} from '@angular/core';
import {FormControl, FormGroup, Validators} from "@angular/forms";
import {AngularFireDatabase} from "@angular/fire/database";
import {root} from "rxjs/internal-compatibility";
import {map} from "rxjs/operators";


@Injectable({
  providedIn: 'root'
})

@Component({
  selector: 'app-discussions-page',
  templateUrl: './discussions-page.component.html',
  styleUrls: ['./discussions-page.component.css']
})
export class DiscussionsPageComponent implements OnInit {

  form: FormGroup;
  email;
  message;
  messages = [];
  private users;

  constructor(private db: AngularFireDatabase) {

  }

  ngOnInit() {
    this.form = new FormGroup({
      message: new FormControl('', Validators.compose([Validators.required,])),
    });

    this.users = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {};
    //  console.log(this.users.user);


    this.db.list('messages').snapshotChanges().pipe(
      map(changes =>
        changes.map(c =>
          ({key: c.payload.key, ...c.payload.val()})
        )
      )
    ).subscribe(data => {
      this.messages = data;
      console.log(this.messages);
    });


    }


  replyTxt(reply, key) {
    const timestamp = this.getTimeStamp();
    this.db.list(`messages/${(key)}/replyMessages`).push({
      reply,
      name: this.users.user.displayName,
      timestamp: timestamp
    });
    // console.log(reply, key)
  }


  onSubmit() {

    const timestamp = this.getTimeStamp();
    this.db.list('messages').push({

      name: this.users.user.displayName,
      message: this.message,
      timestamp: timestamp
    });
    this.message = '';
  }


  getTimeStamp() {
    const now = new Date();
    const date = now.getFullYear() + '/' +
      (now.getMonth() + 1) + '/' +
      now.getDate();
    const time = now.getHours() + ':' +
      now.getMinutes() + ':' +
      now.getSeconds();
    return (date + ' ' + time);
  }

}

А это мой HTML код:

<div class="col-9 offset-2">
  <h4>Մեկնաբանություններ</h4>
</div>
<div class="answers" *ngFor="let item of messages; let i = index">
  <ul>
    <b>{{ item.name }}</b>
    <b>{{ item.key }}</b>

    <p>{{ item.timestamp | date:'yyyy/MM/dd h:mm:ss a' }}</p>

    <p>{{item.message}}</p>


  </ul>

  <div class="reply">
    <input type="text" name="reply-{{i}}" class="form-control" [(ngModel)]="item.reply"/>
    <button class="btn" (click)="replyTxt(item.reply, item.key)"> Reply</button>
  </div>


  <div *ngFor="let item of messages">
    <div *ngFor="let rep of item.replyMessages.key">
      {{rep.name}}
    </div>
  </div>


</div>