Angular 14中ngb-rating组件表格UI评分批量更新问题求助

所有行的ngb-rating组件都双向绑定到了同一个全局变量ratingValue，只要任意一行修改评分，这个变量的值就会更新，进而导致所有行的UI同步变化。

1. 给每个订单条目添加独立的评分属性 #

在组件中处理orderItem数据时，为每个条目添加专属的rating字段，默认值可设为0，若后端返回过已有评分则直接使用该值：

// 假设从接口获取orderItem后执行初始化
this.orderItem.forEach(item => {
  // 用后端返回的已有评分（如果存在），否则默认0
  item.rating = item.existingRating || 0;
});

2. 修改模板绑定，关联条目独立属性 #

将ngb-rating的双向绑定从全局变量改为当前条目的rating属性：

<td>
  <ngb-rating [(rate)]="tempOrderItem.rating"  [readonly]="false" [max]="5"
              (rateChange)="onRateChange(tempOrderItem.productId, tempOrderItem.rating)">
  </ngb-rating>
</td>

3. 调整评分变更方法，传递对应参数 #

更新onRateChange方法，接收当前条目的产品ID和评分值，确保API请求能精准传递对应数据：

onRateChange(productId: number, rating: number) {
  // 调用API服务提交评分
  this.ratingService.submitProductRating(productId, rating).subscribe({
    next: () => {
      // 处理成功逻辑，比如提示用户评分提交成功
    },
    error: () => {
      // 处理错误，可选：恢复当前条目的原评分
    }
  });
}

这样每个行的评分都绑定到自身条目独立的属性，修改某一行的评分只会影响当前行的UI，不会同步到其他行。

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