Angular Shared Service — при добавлении элемента в список общий сервис дублирует данные

Я изучаю Angular и нуждаюсь в вашей помощи :).

У меня есть два компонента: элементы списка и элемент списка.

  1. list-items показывает список элементов
  2. list-item — добавить новый элемент списка.

Когда я добавляю элемент списка в элемент списка и возвращаюсь к элементам списка, в списке элементов общей службы есть повторяющиеся элементы. Проще говоря, когда я добавляю один элемент списка, я вижу несколько повторяющихся элементов на экране элементов списка. Ссылка GitHub на пример проекта для воспроизведения проблемы: @ https://github.com/ChathaKiran/AngularSharedServiceIssue. Ниже приведен снимок моего кода. Подскажите, пожалуйста, как сделать так, чтобы дубликатов не было.

Общий сервис

export class AppService {
  private listItem = new BehaviorSubject(null);
  listItemObservable = this.listItem.asObservable();

  private listItems = new BehaviorSubject([] as string[]);
  listItemsObservable = this.listItems.asObservable();

  updateListItem(_listItem: string) {
    this.listItem.next(_listItem);
  }

  updateListItems(_listItems: string[]) {
    this.listItems.next(_listItems);
  }
}

Компонент элементов списка

export class ListItemsComponent implements OnInit {
  _localListItems: string[];

  constructor(private appService: AppService){}

  ngOnInit(){
    this.appService.listItemsObservable.subscribe(_listItems => {
      this._localListItems = _listItems;
    });

    this.appService.listItemObservable.subscribe(_listItem => {
      if (_listItem != undefined) {
        var allItems = this._localListItems.concat(_listItem);
        this.appService.updateListItems(allItems);
      }
    });
  }
}

Компонент элемента списка

export class ListItemComponent implements OnInit {

  listItemName: string;

  constructor(private maintenanceWindowService: AppService, private router: Router) { }

  ngOnInit() {}

  btnAddListItem(){
    this.maintenanceWindowService.updateListItem(this.listItemName);

    this.router.navigate(['list-items']);
  }
}

person Kiran Chatha    schedule 17.09.2020    source источник


Ответы (1)


Вы всегда должны отказаться от подписки на свои Observables. Прочитайте это article и обновите свой код с помощью ngOnDestroy, где вы будете .unsubscribe() из своего Observable, или добавите какой-нибудь конвейерный оператор, например .pipe(take(1)). Подробнее читайте здесь операторы Piepable

person Ihor Yanovchyk    schedule 17.09.2020
comment
Бинго. Это решило проблему. Благодаря тонну. - person Kiran Chatha; 17.09.2020