Блог

Я пытаюсь найти наилучший подход к обновлению после удаления элемента с моего сервера json. Он успешно удаляет элемент, но мне нужно обновить страницу, чтобы увидеть, что элемент удален. Я попытался выполнить перезагрузку из html, когда нажимается кнопка удаления, но безуспешно. Я знаю, что хочу снова загрузить элемент, чтобы он показал, что элемент больше не существует.

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

Вот мое удаление внутри моего сервиса.

 RemoveProductFromWishlistItem(id:number): Observable<void>{
         console.log("Remove from wishlist item");
           return this.http.delete<void>(`${this.wishlistitemUrl}/${id}`)
     
           .pipe(catchError(_err => of (null))
         );
     
}
 

Заранее Благодарю Вас За
PH

Вот как бы я это сделал

1-й подход: Наблюдаемые объекты и подписки

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

 // items-list.component.ts

private subscription: Subscription;

ngOnInit(){
    this.loadPosts();
}

loadPosts(){
    this.subscription = this.service.getItems().subscribe(items=>{
        this.items = items;
    });
}

// called by a button click
onDelete(id){
    this.service.deleteItemById(id).subscribe(()=>{
        if(this.subscription) this.subscription.unsubscribe();
        this.loadPosts(); // reload all posts from the server
    });
}
 

2-й Подход: Обещания

 ngOnInit(){
    this.loadPosts();
}

async loadPosts(){
  try{
      this.posts = await this.service.getPosts().toPromise()
  } catch(e){ 
      console.error(e); 
  }
}

onDelete(id){
   this.service.deleteById(id).subscribe(()=>{
       this.loadPosts();
   })
}
 

3-й подход: обновление изменений локально

Вы можете просто удалить удаленный элемент из локального списка, тем самым избавив себя от большого количества ненужного использования сети. Но имейте в виду случай, когда кто — то другой тем временем изменил список. Существует два метода

• Сначала обновите содержимое, а затем сделайте запрос на удаление, предполагая, что он будет выполнен успешно. Это может ускорить реакцию вашего приложения, но может привести к тому, что пользователь увидит, что элемент удален, хотя он и не удален с сервера.
• Удалите содержимое с сервера и обновите представление, когда оно завершится.

 onDelete(id){
    let deletedElement, deletedIndex;

    items.forEach((element, index) => {
        if(element.id == id) {
            this.items.splice(index, 1);
            deletedelement = element;
            deletedIndex = index;
        }
    });

    this.service.deleteItem(id).catch(e=>{
        // restore deleted element
        this.items.splice(deletedIndex, 0, deletedItem); 
    });
}
 

Как упоминалось в комментарии, добавьте карту-переключатель, чтобы повторно зафиксировать данные после удаления, так что что-то вроде этого:

 RemoveProductFromWishlistItem(id:number): Observable<WishlistModelHere>{
  return this.http.delete<void>(`${this.wishlistitemUrl}/${id}`).pipe(
    switchMap(() => this.getWishlist()),
    catchError(_err => of (null))
  );
}
 

Я использовал здесь фиктивные имена, так как мы не знаем, как называется ваша модель (назвали ее WishlistModelHere ), и получил список желаний, который я назвал getWishlist .

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