Angular新增费用元素后余额未自动更新的问题求助

我正在学习Angular，遇到了第一个问题——可以成功向费用数组添加新元素，但添加后余额不会自动计算更新。我猜测问题在于服务的getBalance方法不知道费用数组已更新，但不知道如何解决。

CostService 服务代码 #

import { Injectable } from '@angular/core';
import { COSTInterface } from './COSTSInterface'
import {Costs} from './mock-cost'

import { Observable, of } from 'rxjs'

@Injectable({
  providedIn: 'root'
})
export class CostService {

  getCosts(): Observable<COSTInterface[]> {
    return of(Costs);
  }

  getBalance(): Observable<number> {
    let balance = 0;
    this.getCosts().subscribe(costs => {
      for (const cost of costs) {
        if (cost.type === 'income') {
          balance += cost.cost;
        } else {
          balance -= cost.cost;
        }
      }
    });
    return of(balance)
  }

  add(element: COSTInterface): void {
    Costs.push(element)
  }

  getCount(): Observable<number>{
    return of(Costs.length);
  }
  constructor() { }
}

添加费用的组件代码 #

profileForm = this.fb.group({
  id: [0],
  name: [''],
  type: [''],
  cost: [0]
})
count:number = 0;

getCount() {
  this.costService.getCount().subscribe(count => {
    this.count = count + 1;
  })
}
onSubmit() {
  const newCost: COSTInterface = {
    id: this.count || 0, // 如果值为null或undefined，默认设为0
    name: this.profileForm?.value.name || '',
    type: this.profileForm?.value.type || '',
    cost: this.profileForm?.value.cost || 0
  };

  this.costService.add(newCost)
}
constructor(private fb: FormBuilder, private costService: CostService){}

ngOnInit(){
  this.getCount();
}

显示余额的Summary Component代码 #

balance:number = 0;

getBalance(): void {
  this.costService.getBalance().subscribe(balance => {
    this.balance = balance;
  });
}
constructor(private costService: CostService){}
ngOnInit() {
  this.getBalance();
}

解决方法 #

问题核心在于当前用of()返回的是静态Observable，数组更新后不会主动通知订阅者。要用BehaviorSubject管理费用数据，它会在数据变化时自动推送新值给所有订阅者。

1. 修改CostService

import { Injectable } from '@angular/core';
import { COSTInterface } from './COSTSInterface'
import {Costs} from './mock-cost'
import { Observable, BehaviorSubject } from 'rxjs'
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class CostService {
  // 用BehaviorSubject存储费用数组，初始值为mock数据
  private costsSubject = new BehaviorSubject<COSTInterface[]>(Costs);
  // 对外暴露只读的Observable，避免外部直接修改Subject
  public costs$ = this.costsSubject.asObservable();

  getCosts(): Observable<COSTInterface[]> {
    return this.costs$;
  }

  // 通过map操作符实时计算余额，无需手动订阅
  getBalance(): Observable<number> {
    return this.costs$.pipe(
      map(costs => {
        let balance = 0;
        for (const cost of costs) {
          if (cost.type === 'income') {
            balance += cost.cost;
          } else {
            balance -= cost.cost;
          }
        }
        return balance;
      })
    )
  }

  add(element: COSTInterface): void {
    // 创建数组副本，添加新元素后发送给Subject触发更新
    const updatedCosts = [...this.costsSubject.value, element];
    this.costsSubject.next(updatedCosts);
  }

  getCount(): Observable<number>{
    return this.costs$.pipe(map(costs => costs.length));
  }

  constructor() { }
}

2. 修改Summary Component

现在getBalance()返回的Observable会自动响应数组变化，只需订阅一次：

balance: number = 0;

constructor(private costService: CostService){}

ngOnInit() {
  // 订阅后，数组更新时自动获取新余额
  this.costService.getBalance().subscribe(balance => {
    this.balance = balance;
  });
}

3. 可选：优化添加组件的count获取

利用costs$自动获取最新数量，无需手动调用getCount()：

profileForm = this.fb.group({
  id: [0],
  name: [''],
  type: [''],
  cost: [0]
})
count: number = 0;

constructor(private fb: FormBuilder, private costService: CostService){}

ngOnInit(){
  this.costService.getCount().subscribe(count => {
    this.count = count + 1;
  })
}

onSubmit() {
  const newCost: COSTInterface = {
    id: this.count || 0,
    name: this.profileForm?.value.name || '',
    type: this.profileForm?.value.type || '',
    cost: this.profileForm?.value.cost || 0
  };

  this.costService.add(newCost);
  // 添加后count会自动更新，无需手动处理
}

原理说明 #

• BehaviorSubject是特殊的Observable，会保存当前最新值，新订阅时立即推送当前值，调用next()时推送新值给所有订阅者。
• getBalance()通过map操作符基于实时费用数组计算余额，数组变化时自动生成新余额并推送给组件。
• 添加元素时创建数组副本并发送给Subject，确保触发所有订阅者的更新逻辑。

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