Обновление количества элементов с помощью поведенческих тем, взаимодействующих между компонентами - PullRequest
Новая
       10

Обновление количества элементов с помощью поведенческих тем, взаимодействующих между компонентами

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

У меня есть приложение angular 8. и у меня есть два компонента. один компонент, где вы можете редактировать элемент. И один компонент, где вы можете увидеть все предметы. Предметы делятся на четыре категории. И для каждой категории есть счетчик, который подсчитывает предметы в каждой категории. Если я добавляю предмет, счетчик увеличивается, так что работает правильно. Но если я удалю предмет. Счетчик не уменьшается.

Итак, у меня есть этот сервис: 

 _updateItemChanged = new BehaviorSubject<any>([]);
  constructor() {}
}

, и это компонент

, где вы можете удалить дочерний компонент элемента: 

 remove() {
    this.dossierItemService.deleteDossierItem(this.data.dossierId, this.data.item.id)
      .subscribe(() => {
        this.dialogRef.close(true);
        this.itemListService._updateItemChanged.next(this.data.item.title);
      }, (error) => {
        const processedErrors = this.errorProcessor.process(error);
        this.globalErrors = processedErrors.getGlobalValidationErrors();
    });
  }

и это родительский компонент. html: 

  <span i18n>Action steps</span>{{ dossierItemsCountString(itemTypes.ActionStep) }}

и это parent.ts code 

 ngOnInit(): void {  
    this.itemlistService._updateItemChanged.subscribe(data => {
      this.dossierItems  = this.dossierItems.filter(d => d.title !== data);
    });
}

и функция dossierItemsCountString: 

 dossierItemsCountBy(itemType: DossierItemTypeDto) {
    return this.typeSearchMatches[itemType.toString()] || { total: 0, matches: 0 };
  }

  dossierItemsCountString(itemType: DossierItemTypeDto) {  
    const count = this.dossierItemsCountBy(itemType);

    if (this.hasSearchQuery) {
      return `(${count.matches}/${count.total})`;
    } else {
      return `(${count.total})`;
    }
  }

Так что я должен изменить, чтобы в родительском компоненте также счетчик уменьшился, если вы удалите элемент.

Спасибо

1 Ответ

1 голос
/ 19 апреля 2020

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

Решение: 

    this.itemlistService._updateItemRemoved.subscribe(data => {
      const index = this.dossierItems.findIndex(a => a.id === data.id);
      if (index !== -1) {
        this.dossierItems.splice(index, 1);
      }
    });
...