Angular 8：如何对Observable对象的两个属性计算并赋值给另一属性

要实现修改Amount1/Amount2时自动更新Total，核心是确保数据变化时能通知Observable订阅者，同时正确计算总和。以下是分步修改方案：

1. 优化Amount类（可选但推荐） #

给Total添加计算属性，让它自动基于Amount1和Amount2计算，避免手动维护总和：

export class Amount {
  // 初始化默认值，避免undefined导致NaN
  Amount1: number = 0;
  Amount2: number = 0;

  // 计算属性，自动返回两数之和
  get Total(): number {
    return this.Amount1 + this.Amount2;
  }
}

2. 修改AmountService：提供数据更新方法 #

直接修改订阅到的对象不会触发BehaviorSubject的通知（因为引用类型的属性变化不会被检测到）。我们需要在服务中添加一个更新方法，每次更新时创建新的对象并通知订阅者：

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { Amount } from './amount.model'; // 替换为你的Amount类路径

@Injectable({ providedIn: 'root' })
export class AmountService {
  private amountSubject = new BehaviorSubject<Amount>(new Amount());
  // 用$后缀标识Observable，符合RxJS命名规范
  public amount$: Observable<Amount> = this.amountSubject.asObservable();

  // 更新Amount1或Amount2的方法
  updateAmount(partialAmount: Partial<Amount>) {
    // 获取当前值，创建新对象（避免修改原引用）
    const currentAmount = this.amountSubject.value;
    const updatedAmount = { ...currentAmount, ...partialAmount };
    
    // 发送新对象通知所有订阅者
    this.amountSubject.next(updatedAmount);
  }
}

3. 调整Calculation组件：使用AsyncPipe简化订阅 #

手动订阅Observable需要手动取消订阅，容易导致内存泄漏。改用async pipe可以自动处理订阅和取消订阅：

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Amount } from './amount.model';
import { AmountService } from './amount.service';

@Component({
  selector: 'app-calculation',
  templateUrl: './calculation.component.html',
  styleUrls: ['./calculation.component.css']
})
export class Calculation implements OnInit {
  amount$: Observable<Amount>;

  constructor(private amountService: AmountService) {}

  ngOnInit() {
    // 直接赋值Observable，交给模板的async pipe处理
    this.amount$ = this.amountService.amount$;
  }

  // 处理Amount1输入变化
  onAmount1Change(value: number) {
    this.amountService.updateAmount({ Amount1: value });
  }

  // 处理Amount2输入变化
  onAmount2Change(value: number) {
    this.amountService.updateAmount({ Amount2: value });
  }
}

4. 更新组件模板：绑定数据并监听变化 #

使用单向绑定[ngModel]获取数据，(ngModelChange)监听输入变化并调用服务的更新方法，同时用async pipe订阅Observable：

<form name="calculationform">
  <mat-form-field class="example-full-width">
    <mat-label>Amount1</mat-label>
    <input 
      matInput 
      [ngModel]="(amount$ | async)?.Amount1" 
      (ngModelChange)="onAmount1Change($event)" 
      name="Amount1"
      type="number"
    >
  </mat-form-field>

  <mat-form-field class="example-full-width">
    <mat-label>Amount2</mat-label>
    <input 
      matInput 
      [ngModel]="(amount$ | async)?.Amount2" 
      (ngModelChange)="onAmount2Change($event)" 
      name="Amount2"
      type="number"
    >
  </mat-form-field>

  <mat-label>Total:</mat-label>
  <mat-label>{{(amount$ | async)?.Total}}</mat-label>
</form>

关键说明： #

• 为什么不用双向绑定[(ngModel)]？ 双向绑定会直接修改订阅到的对象，但BehaviorSubject不会检测到对象内部属性的变化（因为引用没改变），所以需要通过服务的updateAmount方法创建新对象并发出通知。
• AsyncPipe的好处：自动管理订阅生命周期，避免内存泄漏，代码更简洁。
• 初始化默认值：给Amount的属性设置默认值0，防止初始状态下Total显示NaN。

内容的提问来源于stack exchange，提问作者muthu lingam Raja