Угловое 6 добавление значения к наблюдаемой

Question

messenger.component.ts

import { MessengerService } from 'messenger.service';

messages: any =[];

ngOnInit(): void {
    // call logs to http api
    this.messages = this.messengerService.getData();
}

sendMessage(message){
   this.messages.subscribe(data => {
        data.push({
            message_from: 'borrower',
            message: message
        });
       console.log(data);
    });
}

OUTPUT CONSOLE.LOG (data)

0: {message_from: "borrower", message: "hi", status: 0, user: 1}
1: {message_from: "borrower", message: "test", status: 0, user: 1}
2: {message_from: "borrower", message: "yea", status: 0, user: 1}
3: {message_from: "borrower", message: "aasd", status: 0, user: 1}
4: {message_from: "borrower", message: "aaa", status: 0, user: 1}

messenger.service.ts

public getData(): Observable<MessageData[]> {
        return this.http.get<MessageData[]>('API', {
            headers: {
                Authorization: `Bearer ${sessionStorage.getItem('token')}`,
                Accept: 'application/json'
            }
        }).pipe(map(response => response['success']));
    }

messenger.component.html

<ng-container *ngFor="let message of messages | async ">
            //template  
 </ng-container>

Уже можно получить данные из API веб-сервера.Я хочу добавить еще одну функцию, которая отправляет данные и может показывать их сразу после нажатия кнопки «Отправить».Как это сделать, используя Observable, который может добавить в предыдущий список?

Preview

Я просто хотел сразу показать сообщение после нажатия функции sendMessageкоторый будет сохранять через API и синхронизировать его с Observable

Answer 1

Полностью не проверено, но идея в том, что вы используете BehaviourSubject, в котором хранятся введенные вами новые данные.Которые будут объединены onSubmit и отправлены на this.messages с использованием combineLatest.При загрузке компонента он получает сообщения от сервиса.

newMessages = new BehaviourSubject<MessageData[]>([]);

messages: Observable<MessageData[]> = combineLatest(
  this.newMessages,
  this.messengerService.getData()
).pipe(
  map(([added, data]) => data.concat(added))
);

sendMessage(message): void {
  const messages = this.newMessages.getValue();
  messages.push(message);

  this.newMessages.next(messages);
  this.messengerService.addMessage({
    message_from: 'borrower',
    message
  }); // make proper sending logic here
}

Answer 2

Если я правильно понимаю ваш вопрос, вы можете использовать этот метод

currentTook = new BehaviorSubject([]);

в запросе на получение

    this.currentTook.next(sendData);

и в другом компоненте вы можете ввести этот

@Input() currentTook: Observable<any>;

this.currentTook.subscribe(data => {
         console.log(data);

     });