Я изучаю Angular и нуждаюсь в вашей помощи :).
У меня есть два компонента: элементы списка и элемент списка.
- list-items показывает список элементов
- 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']);
}
}