如何遍历Observable数组并更新计算得到的公共值

嘿，我来帮你搞定这个计算支付总额的需求！先看你现有的代码，你已经在订阅payments$了，只是循环累加的逻辑没写完，同时我也会给你推荐更贴合RxJS风格的实现方式。

方法一：完善现有订阅内的循环逻辑 #

如果你想继续维护total这个变量，只需要在每次数组更新时重置总额，再遍历累加每个支付项的金额就行，代码如下：

@Injectable() 
export class PaymentsProvider { 
  total: number = 0; 
  private payments = new BehaviorSubject<Payment[]>([]); 
  payments$: Observable<Payment[]> = this.payments.asObservable(); 

  constructor() { 
    console.log("init payments service") 
    this.payments$.subscribe(payments => {
      this.total = 0; // 每次数组更新先重置总额
      for (let payment of payments) {
        // 这里替换成你实际的金额字段，比如payment.amount
        this.total += payment.amount; 
      }
    });
  }
}

注意：一定要先把total重置为0，不然每次数组变化时都会在旧的总额基础上累加，导致计算结果错误。

方法二：用RxJS操作符实现响应式total（更推荐） #

其实在RxJS的场景下，把total也做成Observable会更优雅，不需要手动维护变量，还能自动响应数组的变化。我们可以用map操作符结合数组的reduce方法来实现：

@Injectable() 
export class PaymentsProvider { 
  private payments = new BehaviorSubject<Payment[]>([]); 
  payments$: Observable<Payment[]> = this.payments.asObservable(); 
  // 直接通过payments$派生total的Observable
  total$: Observable<number> = this.payments$.pipe(
    map(payments => payments.reduce((sum, payment) => sum + payment.amount, 0))
  );

  constructor() { 
    console.log("init payments service") 
  }

  // 举个例子：如果你需要添加支付项的方法
  addPayment(newPayment: Payment) {
    const currentPayments = this.payments.value;
    this.payments.next([...currentPayments, newPayment]);
  }
}

这样一来，任何订阅total$的组件都会在payments数组变化时自动拿到最新的总额，而且用reduce代替手动循环更简洁，也避免了订阅带来的副作用（比如内存泄漏风险，搭配Angular的async管道使用会更省心）。

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