如何让Angular Signal实现响应式？购物车删除项未即时刷新问题

移除购物车商品后，目标商品仍会保留在页面上，直到浏览器刷新才会消失。相关代码如下：

页面移除按钮代码 #

<div>         
    <a class="d-block" style="color: red !important;"
      (click)="removeItemFromCart(item.product._id)">
      <i class="fa fa-trash">
      </i>&nbsp;Remove</a>
</div>

组件中的removeItemFromCart方法 #

public removeItemFromCart = (productId:string) => {
    this.cartService.removeItemFromCart(productId)
}

CartService中的信号定义 #

public cartSignal = signal<{ cartItems:CartItem[]}>({ cartItems:[]})

CartService中的removeItemFromCart实现 #

public removeItemFromCart = (productId:string) => {
    const cartItems = this.cartSignal().cartItems.filter(item => item.product._id !== productId);
    this.cartSignal.set({cartItems:[...cartItems]});

    saveStateToLocalStorage(this.cartSignal())
}

购物车页面列表渲染代码 #

<div class="table-responsive">
<table class="table table-sm table-bordered">
    <tbody>
        <tr *ngFor="let item of cartItems">
            <td>
                <img class="img-fluid mb-2" src="assets/img/{{item.product.images[0]}}" style="width: 268px;">
            </td>
            <td>
                <h6 class="mb-2">{{item.product.name}}</h6>
                <div class="mb-2">
                    <span [createRatingStars]="item.product.rating">
                        <span>

                        </span>
                    </span>
                </div>
            </td>
            <td class="text-end" style="text-align: right;">
                <div class="mb-3">
                    <h4 class="d-inline-block">
                        {{item.product.price | discountPrice:item.product.discount}}
                    </h4>
                    <small class="d-inline-block ms-2 text-decoration-line-through">
                        {{item.product.price | currency}}
                    </small>
                </div>
                <div class="d-sm-flex justify-content-sm-end mb-3" style="text-align: right;">
                    <div class="input-group text-center" style="width: 109.3px;">
                        <button class="btn btn-light btn-sm" type="button"
                            (click)="decreaseProductQuantity(item.product._id, item.quantity)"
                            style="border-color: #7b189f;">
                            <i class="fa fa-minus" style="color: #7b189f;">
                            </i>
                        </button>
                        <input class="form-control d-flex d-md-flex text-center" type="text" name="quantity"
                            [(ngModel)]="item.quantity" readonly="" style="border-color: #7b189f;">
                        <button class="btn btn-light btn-sm" type="button"
                            (click)="increaseProductQuantity(item.product._id)" style="border-color: #7b189f;">
                            <i class="fa fa-plus" style="color: #7b189f;">
                            </i>
                        </button>
                    </div>
                </div>
                <div>
                    <a class="d-block" style="color: #7b189f;">
                        <i class="fa fa-download">
                        </i>&nbsp;Save for later</a>
                    <a class="d-block" style="color: red !important;"
                        (click)="removeItemFromCart(item.product._id)">
                        <i class="fa fa-trash">

                        </i>&nbsp;Remove</a>
                </div>
            </td>
        </tr>
    </tbody>
</table>

组件中监听信号变化的effect #

private cartEffect = effect(() => {    
   this.cartItems = this.cartService.cartSignal().cartItems;
   console.dir('cartComponent.cartItems', this.cartItems)
});

问题原因 #

组件中的cartItems是普通类属性，而非响应式变量。尽管effect会在服务信号变化时更新cartItems，但Angular的变更检测机制无法追踪普通属性的变化，因此不会自动更新视图。

解决方案 #

有三种可行的解决方式：

方案1：将cartItems改为派生信号

在组件中直接从服务信号派生出cartItems信号：

cartItems = computed(() => this.cartService.cartSignal().cartItems);

模板中调用信号获取值：

<tr *ngFor="let item of cartItems()">

Angular会自动监听信号变化，即时触发视图更新。

方案2：手动触发变更检测

注入ChangeDetectorRef并在effect中手动标记视图需要更新：

constructor(private cd: ChangeDetectorRef) {}

private cartEffect = effect(() => {    
   this.cartItems = this.cartService.cartSignal().cartItems;
   console.dir('cartComponent.cartItems', this.cartItems);
   this.cd.markForCheck(); // 通知Angular检测视图变更
});

方案3：模板直接使用服务信号

跳过组件中间变量，模板中直接引用服务的信号：

<tr *ngFor="let item of cartService.cartSignal().cartItems">

这种方式最简洁，无需额外代码即可实现即时更新。

内容的提问来源于stack exchange，提问作者koque