Компонент пользовательского интерфейса не обновляется в соответствии с изменением данных

Question

Я пытаюсь получить страницу, состоящую из 3 компонентов, для связи друг с другом с помощью службы данных.А именно, у меня есть компонент Create / Edit, который должен добавлять события, компонент «следующие события», который должен позволять мне принимать / отклонять события, и компонент Calendar, который должен позволять мне видеть все предстоящие события.

Мой сервис хранит массив событий, и я хочу, чтобы этот массив был виден другим компонентам, и всякий раз, когда я обновляю событие, это изменение будет отправлено всем другим компонентам.Для этого я пытаюсь использовать BehaviourSubject от Rxjs, но наткнулся на стену.Всякий раз, когда я создаю новое событие, я делаю всю логику добавления в компоненте службы, но если я не перезагружаю компонент Календарь (представление), я не вижу добавленного нового события.

Класс компонента службы

 EXPORT CLASS eventService { 
  public Sevents = new BehaviorSubject<AgendaEvent[]>([]);
  private eventsToManipulate;

  constructor() { 
      this.getAllData();
  }

  getAllData() {
    this.http.get(url).subscribe(data => { 
    // here I map the events from the API to the eventsToManipulate 
            array
    this.Sevents.next(eventsToManipulate);
    }) 
  }

  addNewData(event) { 
    this.http.post(url, event).subscribe( 
    {
        this.eventsToManipulate.push(event);  
        this.Sevents.next(this.eventsToManipulate);
    });
  }

}

Просмотр класса компонентов

EXPORT CLASS eventView { 
events = new Array<Events>();

ngOnInit() {
     this.eventService .Sevents.subscribe( element => {
     console.log('this is element', element);
     this.events = element;
    })

}

Как я понимаю, RXjs, субъект Поведения должен отправлять обновления всем подписчикам о новых данных, как только это произойдет.Однако, похоже, это не относится к моему коду.

Раньше я получал желаемый эффект, заставляя компоненты загружать данные снова и снова с помощью генератора событий, но я ищучто-то более приятное в реализации с RxJs

Answer 1

Вам нужно сделать Observable из BehaviorSubject, чтобы подписаться на изменения.

Попробуйте это:

EXPORT CLASS eventService { 
  private Sevents = new BehaviorSubject<AgendaEvent[]>([]);
  public Sevents$: Observable<AgendaEvent[]>;
  private eventsToManipulate;

  constructor() { 
    this.Sevents$ = this.Sevents.asObservable();
    this.getAllData();
  }
  ...
}

Просмотр класса компонента:

EXPORT CLASS eventView { 
  events = new Array<Events>();

  ngOnInit() {
    this.eventService.Sevents$.subscribe( element => {
      console.log('this is element', element);
      this.events = element;
    })

}

У меня что-то похожее работает здесь