Метод Subscribe () вызывается несколько раз при нажатии кнопки в Angular 8 - PullRequest
Новая
       69

Метод Subscribe () вызывается несколько раз при нажатии кнопки в Angular 8

0 голосов
/ 02 мая 2020

Я застрял при разработке приложения Angular 8 из-за проблемы. На интерфейсе есть две кнопки. Когда я нажимаю кнопку, запускается событие, которое предоставляет мне свою позицию индекса в массиве packageHeaders. 

<p-tabView (onChange)="tabChange($event)">
          <p-tabPanel *ngFor="let tabHeader of packageHeaders" [header]=tabHeader>
                //few html lines
          </p-tabPanel>  
</p-tabView>

На основе индекса я отображаю данные пакета в 3-4 различных компонентах и ​​выполняю вычисления в соответствии с бизнес-правилами / требованиями.

Чтобы сделать выбранный индекс доступным во всех компонентах, я объявил BehaviourSubject в классе обслуживания и передал ему индекс. Затем, после этого, я выпускаю его как видимый, чтобы мои компоненты могли подписаться на него. Ниже приведен фрагмент кода класса обслуживания: 

public tabIndex = new BehaviorSubject<number>(0);

findTabClicked(changeInTabSelection: number) {
    this.tabIndex.next(changeInTabSelection);
  }

  getSelectedTab(): Observable<number> {
    return this.tabIndex.asObservable();
  }

В моих компонентах я подписываюсь на него, чтобы получить последнее выбранное значение. Например: 

 this.service.getSelectedTab().subscribe((selectedTabIndex) => {
      this.packageTypeInUse(selectedTabIndex);
      this.calculateTotalOnQuantityChange(this.regularIndex[selectedTabIndex]);
    });

Я также отписался об этом в хуке жизненного цикла ngOnDestroy (). В шаблоне я использую для l oop, чтобы показать строку Items *ngFor="let item of packageLineItems[tabIndex]

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

Есть две проблемы:

  1. Приведенный выше метод подписки вызывается дважды во всех компонентах.
  2. При отладке кода я узнал, что в первой подписке мой массив packageLineItems [tabIndex] имел измененные значения, но он переопределяется начальными значениями массива во второй подписке.

Я инициализировал массив в ngOnInit (). Просто чтобы быть уверенным, я также убедился, что при изменении заголовков вкладок ngOnInit () не вызывается. Не уверен, как массив возвращается к исходным значениям автоматически при втором нежелательном вызове подписки.

1 Ответ

0 голосов
/ 04 мая 2020

Наконец, проблема решена. Это была глупая ошибка, но хорошее понимание. Фрагмент HTML, которым я поделился в вопросе, имеет for-l oop. Вместо закрытия тега html <p-tabPanel>, как показано ниже, мы закрыли его после объявления дочерних компонентов в l oop. 

<p-tabPanel *ngFor="let tabHeader of this.packageHeaders" [header]=tabHeader></p-tabPanel>

. Именно поэтому компоненты инициализировались несколько раз и то же самое с подписчиками.

...