Модель не обновляется в соответствии с обратным вызовом подписки в угловых 6

Question

Я пытаюсь заставить 2 компонента взаимодействовать друг с другом с помощью службы.Первый компонент добавляет / удаляет записи из списка и добавляет принятые в календарь, а второй отображает их.Мне удалось обновить список, но у меня возникли проблемы с обновлением 2-го представления, в основном возникли проблемы с удалением отклоненных записей из календаря.

Calendar.service.ts

private someEvents: AgendaEvent[];
  private BehaviorSubject<AgendaEvent[]> = new BehaviorSubject<AgendaEvent[]>([])
  private subjectTest: BehaviorSubject<AgendaEvent[]>;

      public readAvailableEvents(): Array<AgendaEvent> {
        this.availableEvents = new Array<AgendaEvent>();
        this.someEvents.forEach((element) => {
          if (element.accepted === false) {
            this.availableEvents.push(element);
          }
        });
        return this.availableEvents;
      }

      declineEventById(event: AgendaEvent): Observable<AgendaEvent[]> {
        const index = this.someEvents.indexOf(event);
        this.someEvents.splice(index, 1);
        console.log(this.someEvents);
        this.subject.next(this.readAvailableEvents());
        this.subjectTest.next(this.someEvents);
        return this.subject.asObservable();
      }

      getAgendaEventsData(): Observable<AgendaEvent[]> {
        this.subjectTest.next(this.someEvents);
        console.log(this.someEvents);
        return this.subjectTest.asObservable();
      }

Events.component.ts

     events: AgendaEvent[];
  constructor(
    private calCrud: CalendarCRUDService,
  ) {
    this.calCrud.getAgendaEventsData().subscribe(data => {
      console.log(data);
      console.log(this.events);
      this.events = data;
      console.log(this.events); });
   }

Мне интересночто я делаю не такВнутри моего HTML мои данные привязаны к массиву событий, а данные, возвращаемые из обратного вызова, - это то, что я хочу.Единственное, чего не хватает, так это представления, которое фактически обновляется при удалении элемента.Кроме того, с помощью этого кода я пытаюсь добиться уведомления различных подписчиков по различным предметам.Следовательно, почему в коде есть тема и тема субъекта.

Answer 1

Вы пытались добавить .bind (this) в конец подписки?

this.calCrud.subjectTest$.subscribe(data => {
            console.log(data);
            console.log(this.events);
            this.events = data;
            console.log(this.events); 
}).bind(this);   

Answer 2

Можете ли вы попытаться вызвать changeDetection явно, как показано ниже

  events: AgendaEvent[];
  constructor(
    private calCrud: CalendarCRUDService,private cdref: ChangeDetectorRef
  ) {
    this.calCrud.getAgendaEventsData().subscribe(data => {
      console.log(data);
      console.log(this.events);
      this.events = data;
      this.cdref.detectChanges();
      console.log(this.events); });
   }

Некоторые предложения кода, которые вы можете попробовать

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

getAgendaEventsData(): void {
        this.getSubjectTest.next(this.someEvents);
      }

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

getSubjectTest():BehaviorSubject<AgendaEvent[]>{
    return this.subjectTest;
}

подписаться

this.calCrud.getSubjectTest().subscribe(data => {
 this.events = data;

});

Answer 3

Вы возвращаете наблюдаемое после передачи данных.Пожалуйста, следуйте этому

private subjectTest: BehaviorSubject<AgendaEvent[]> = new BehaviorSubject<AgendaEvent[]>([]);
public subjectTest$ = this.subjectTest.asObservable();

Удалить 'return this.subject.asObservable ();'в обоих методах обслуживания

Events.component.ts

this.calCrud.subjectTest$.subscribe(data => {
      console.log(data);
      console.log(this.events);
      this.events = data;
      console.log(this.events); });
   }