Как обновить массив объектов, не покидая страницы в приложении Ioni c / Angular? - PullRequest
Новая
       38

Как обновить массив объектов, не покидая страницы в приложении Ioni c / Angular?

0 голосов
/ 10 апреля 2020

В моем приложении Ioni c 5 / Angular у меня есть следующие модели: Conversation & Message: 

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

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

На странице Conversation-Detail отображается список Messages относится к определенному Conversation.

На Conversation-Detail также существует форма, позволяющая пользователям добавлять больше Message s к этому Conversation.

Здесь текущее поведение:

  1. Открыть Conversation-Detail страницу, и отображается список Message s
  2. Введите текст в форму и нажмите кнопку Отправить. Не обновляется список Message с.
  3. Покинуть страницу Conversation-Detail, вернуться к Conversation-Detail, и список Message с содержит новое сообщение.

Но я хочу, чтобы список Message обновлялся после того, как пользователь нажимает Отправить, как мне это сделать? (т. Е. Отображать последние сообщения)

Я думаю, важно отметить, что console.log('Loaded', this.loadedMessages); отображается только при переходе на страницу, но не регистрируется при отправке новый Message

Вкл. Conversation-Detail, я использую идентификатор Conversation для отображения всех Message с в этом Conversation: 

<ion-virtual-scroll [items]="loadedMessages">
    <ion-item-sliding *virtualItem="let message">
        <h2>{{ message.text}}</h2>
    </ion-item-sliding>
</ion-virtual-scroll>

Conversation-detail.page.ts: 

conversation: Conversation;
loadedMessages: Message[];
private conversationsSub: Subscription;

ngOnInit() {
      this.conversationsSub = this.conversationsService
        .getConversation(paramMap.get('conversationId'))
        .subscribe(conversation => {
          this.conversation = conversation;
          this.loadedMessages = this.conversation.messages;
          console.log('Loaded', this.loadedMessages);
          this.form = new FormGroup({
            message: new FormControl(null, {
            })
          });
        });
    });
  }

Conversations.service.ts: 

getConversation(id: string) {
    return this.conversations.pipe(
      take(1),
      map(conversations => {
        return { ...conversations.find(conversation => conversation.id === id) };
      }));
  }

На Conversation-Detail, у меня также есть форма, позволяющая пользователям добавлять больше Message s к этому Conversation: 

<form [formGroup]="form">
    <ion-textarea formControlName="message"></ion-textarea>
    <ion-button (click)="onSendMessage()">Send</ion-button>
</form>

Conversation-detail.page.ts: 

onSendMessage() {
    this.conversationsService.addMessageToConversation(this.conversation.id, this.form.value.message);
  }

И здесь это остальная часть ConversationsService кода: 

addMessageToConversation(conversationId: string, message: string) {
    this.getConversationToAddMessage(conversationId).messages.push(this.createMessage(message));
    console.log(this._conversations);
  }

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

private createMessage(message: string): Message {
    return {
      id: Math.random().toString(),
      text: message,
      userId: this.authService.userId,
      timestamp: new Date(Date.now())
    };
  }

Так что список Message обновляется только когда я покидаю страницу и go возвращаюсь. Как я могу обновить список, не выходя?

...