如何使用后端请求更新 Angular 中的组件，而不刷新页面？

Answer 1

这里有一些免费的指针：

1. 使用动态类而不是 ngIf

<i [class]="'fa-heart ' + isFavourite ? 'fa-regular' : 'fa-solid'"></i>

有几种不同的方法可以做到这一点

2. 始终取消订阅。 这里有关于如何做到这一点的资源。

关于你的问题：你的

toggleFavourite

函数太复杂了。 有2种方法可以解决这个问题。

1. 调用后端并等待结果然后显示结果
2. 假设它有效，更新前端并继续。

你两者都在做。

我假设您正在尝试执行第 2 项操作。在您的

toggleFavourite

函数中，将对

updateFavouritesLocally

的调用移出您的订阅。 无需等待切换响应，因为您没有使用返回的任何内容。

  toggleFavourite(event: Event) {
    event.stopPropagation();

    this.favouriteService.updateFavouritesLocally(this.product.uid);
    // Add `.pipe()` and use it to unsubscribe
    this.favouriteService.toggleFavourite(this.product.uid).subscribe({
      next: () => { /* empty */ },
      error: (err) => {
        console.error('Error toggling favourite:', err);
      }
    });

还有一点，这个选角让我很担心

      const newFavourite: PrimitiveProduct = {
        uid: productUid
      } as PrimitiveProduct;
      this.favouritesSubject.next([...favourites, newFavourite]);

在打字稿中你应该像这样进行转换。 它要么是

PrimitiveProduct

，因为这是正确的签名，要么不是。 问题可能出在该对象中缺少数据的要求中的某个地方。 我不能肯定地说。