Вы слишком усложняете вещи.Вам не нужно создавать другую Observable, если "http's" get() вернет Observable сама по себе.Если вы хотите отказаться от подписки, вы можете сделать это, когда ваш компонент разрушается.Если я правильно понимаю, то единственное преимущество добавления блока if() в getAll() - не вызывать другой HTTP-запрос, если он уже в пути.
Сделайте ваш getAll() следующим образом:
getAll() {
this.http.get<Category>(`http://localhost:5000/api/Category`);
}
Создайте переменную класса в вашем компоненте, которая содержит подписку
getAllSubscription: Subscription
Создайте метод getAllCategories() в вашем компоненте.
Нет необходимости categorysObservable$prop в классе, вместо этого создайте categories prop, который содержит фактические данные.
getAllCategories() {
if (this.getAllSubscription) {
this.getAllSubscription.unsubscribe();
}
this.getAllSubscription = this.categoryService.getAll().subscribe((data) => {
this.categories = data;
}, (error) => {
// errors will come here
})
}
Удалите async pipe из вашего шаблона и используйте его вместо
<div *ngIf="categories">
....
</div>
Измените другие методы в вашем сервисе так, чтобы они просто возвращали Observable (не подписывайтесь туда), например:
add(category: string) {
return this.http.post<Category>('http://localhost:5000/api/Category', {Category: category});
}
, вызов getAllCategories() для ваших categoryAdded() и deleteCategory() методов
categoryAdded(categoryname: string) {
this.categoryService.add(categoryname).subscribe((data) => {
// do something with data, show error success msgs,etc
this.getAllCategories();
})
}
Примечание: Могут быть и другие способы (с помощью rxjs операторов сглаживания) для достижения getAll() в update (), delete () Observables.Я использовал их как отдельные Наблюдаемые, полагая, что вам понадобятся отдельные ответы об успехах / ошибках для каждого из запросов.
Обновление
Если вам нужно использовать операторы сплющивания, выможет реализовать это следующим образом.
add(category: string) {
return this.http.post<Category>('http://localhost:5000/api/Category', {Category: category}).pipe(
mergeMap((dataFromAdd) => {
// can just return this.getAll() if you don't care for the response of the above post() request. (But you should care!)
return this.getAll().pipe(
map((dataFromGetAll) => {
return {
addResponse: dataFromAdd,
allCategories: dataFromGetAll
}
})
)
})
)
}
В вашем компоненте измените categoryAdded() как
categoryAdded(categoryname: string) {
this.categoryService.add(categoryname).subscribe((data) => {
this.categories = data.allCategories
})
}