Как вернуть несколько значений вложенного массива в приложении Ioni c / Angular?

Question

В моем приложении Angular я пытаюсь отобразить разговор, содержащий список сообщений.

Вот три модели, которые я использую:

Пользователь. model.ts:

export class User {
    constructor(
        public id: string,
        public name: string,
        public userType: string,
    ) { }
}

Conversation.model.ts:

import {Message} from './message.model';

export class Conversation {
    constructor(
        public id: string,
        public userId: string,
        public mechanicId: string,
        public messages: Message[],
    ) { }
}

Message.model.ts:

export class Message {
    constructor(
        public id: string,
        public text: string,
        public userId: string,
        timestamp: string
    ) { }
}

Когда пользователь переходит на страницу Conversation_Detail ниже, я читаю Идентификатор разговора из карты параметров ActivatedRoute:

Conversation-Detail.page.ts :

export class ConversationDetailPage implements OnInit {

  conversation: Conversation;

  constructor(private route: ActivatedRoute, private conversationsService: ConversationsService, public usersService: UsersService) { }

  ngOnInit() {
    this.route.paramMap.subscribe(paramMap => {
      this.conversation = this.conversationsService.getConversation(paramMap.get('conversationId'));
    })
  }
}

Затем я использую этот Идентификатор разговора чтобы извлечь беседу из ConversationService ниже.

Conversation.Service.ts :

export class ConversationsService {

  private _conversations: Conversation[] = [
    new Conversation(
      'conversation1',
      'user3',
      'user1',
      [
        new Message('message1', 'Test message', 'user3', '01/01/2020'),
        new Message('message2', 'Another message', 'user1', '02/01/2020')
      ]),
    new Conversation(
      'conversation2',
      'user4',
      'user2',
      [
        new Message('message3', 'my  message', 'user4', '05/03/2020'),
        new Message('message4', 'more messages', 'user2', '08/03/2020')
      ])
  ];

  get conversations() {
    return [...this._conversations];
  }

  constructor() { }

  getConversation(id: string) {
    return { ...this._conversations.find(conversation => conversation.id === id) };
  }
}

После извлечения беседы я используя UserService для отображения имени Mechani c, связанного с этим разговором:

Conversation-Detail.page. html:

<ion-title>
    {{ usersService.getUserNameByUserId(conversation.mechanicId) }}
</ion-title>

Users.service.ts :

export class UsersService {

  private _users: User[] = [
    new User('user1', 'John', 'mechanic'),
    new User('user2', 'Phil', 'mechanic'),
    new User('user3', 'Andrew', 'customer'),
    new User('user4', 'Ivan', 'customer')
  ];

  get users() {
    return [...this._users];
  }

  constructor() { }

  getUserNameByUserId(userId: string) {
    return this.users.filter(user => user.id === userId)[0].name;
  }

  getImageUrlByUserId(userId: string) {
    return this.users.filter(user => user.id === userId)[0].imageUrl;
  }
}

Но теперь я не знаю, как отобразить сообщений в разговорах на Страница разговора . Может кто-нибудь сказать мне, как это сделать?