在Angular/Ionic应用中高效计算Observable数据流的列表总计

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Observable, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
// 假设您的数据库服务路径，请根据实际情况调整
import { DatabaseService } from '../services/database.service'; 

// 定义产品接口，增强类型安全性
interface Product {
  id: number;
  name: string;
  creatorId: number;
  price: number;
  amount: number;
  total: number;
}

@Component({
  selector: 'app-report',
  templateUrl: './report.page.html',
  styleUrls: ['./report.page.scss'],
})
export class ReportPage implements OnInit, OnDestroy {
  products: Observable<Product[]>;
  grandTotal: number = 0; // 用于存储计算出的总计
  private destroy$ = new Subject<void>(); // 用于管理Observable订阅的生命周期

  constructor(public db: DatabaseService) {}

  ngOnInit() {
    this.db.getDatabaseState().subscribe((rdy) => {
      if (rdy) {
        this.products = this.db.getProducts(); // 获取产品Observable
        this.calculateGrandTotal(); // 调用方法计算总计
      }
    });
  }

  /**
   * 计算产品列表总计的方法。
   * 订阅 products Observable，并在数据可用时使用 reduce 方法累加总额。
   */
  calculateGrandTotal() {
    this.products
      .pipe(takeUntil(this.destroy$)) // 使用takeUntil在组件销毁时自动取消订阅
      .subscribe((data: Product[]) => {
        if (data && data.length > 0) {
          this.grandTotal = data.reduce((sum, current) => sum + current.total, 0);
        } else {
          this.grandTotal = 0; // 如果没有数据，总计为0
        }
      });
  }

  /**
   * 组件销毁时，发出信号通知所有 takeUntil 订阅取消。
   */
  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

<ion-grid>
  <ion-row nowrap class="headers">
    <ion-col size="5" class="single-border"> Name </ion-col>
    <ion-col size="2" class="single-border"> Price </ion-col>
    <ion-col size="3" class="single-border"> Amount </ion-col>
    <ion-col size="3" class="single-border"> Total </ion-col>
  </ion-row>

  <!-- 使用 async 管道迭代显示产品列表 -->
  <ion-row nowrap class="content" *ngFor="let prod of products | async">
    <ion-col size="5"> {{ prod.name }} </ion-col>
    <ion-col size="2"> {{ prod.price }} </ion-col>
    <ion-col size="3"> {{ prod.amount }} </ion-col>
    <ion-col size="3"> {{ prod.total }} </ion-col>
  </ion-row>

  <!-- 显示总计行 -->
  <ion-row nowrap class="headers">
    <ion-col size="5" class="top-border">
      <!-- Name -->
    </ion-col>
    <ion-col size="2" class="top-border">
      <!-- price -->
    </ion-col>
    <ion-col size="3" class="top-border"> grand amount total </ion-col>
    <ion-col size="3" class="top-border">
      {{ grandTotal }} <!-- 直接绑定到组件的 grandTotal 属性 -->
    </ion-col>
  </ion-row>
</ion-grid>

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Observable, Subject } from 'rxjs';
import { map, takeUntil } from 'rxjs/operators'; // 引入map操作符
import { DatabaseService } from '../services/database.service';

interface Product {
  id: number;
  name: string;
  creatorId: number;
  price: number;
  amount: number;
  total: number;
}

@Component({
  selector: 'app-report',
  templateUrl: './report.page.html',
  styleUrls: ['./report.page.scss'],
})
export class ReportPage implements OnInit, OnDestroy {
  products: Observable<Product[]>;
  grandTotal$: Observable<number>; // 使用Observable来存储总计

  private destroy$ = new Subject<void>();

  constructor(public db: DatabaseService) {}

  ngOnInit() {
    this.db.getDatabaseState().subscribe((rdy) => {
      if (rdy) {
        this.products = this.db.getProducts();
        // 使用pipe(map)来转换products Observable，计算总计
        this.grandTotal$ = this.products.pipe(
          takeUntil(this.destroy$), // 同样用于管理生命周期
          map((data: Product[]) => {
            if (data && data.length > 0) {
              return data.reduce((sum, current) => sum + current.total, 0);
            }