我想在Ionic 3中获得购物车中所有产品价格的总和

import { Component } from '@angular/core';
import { CartService } from '购物车服务的引用';

@Component({
  selector: 'app-cart',
  templateUrl: 'cart.component.html',
  styleUrls: ['cart.component.scss']
})
export class CartComponent {
  total: number = 0;

  constructor(private cartService: CartService) {}

  ionViewDidEnter() {
    this.calculateTotalPrice();
  }

  calculateTotalPrice() {
    const cartItems = this.cartService.getCartItems();
    this.total = 0;
    for (const item of cartItems) {
      this.total += item.price;
    }
  }
}

<ion-header>
  <ion-toolbar>
    <ion-title>
      购物车
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item *ngFor="let item of cartItems">
      <ion-label>{{ item.name }}</ion-label>
      <ion-label slot="end">{{ item.price }}</ion-label>
    </ion-item>
  </ion-list>

  <div class="total-price">
    总价格: {{ total }}
  </div>
</ion-content>

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class CartService {
  private cartItems: any[] = [
    { name: '产品1', price: 10 },
    { name: '产品2', price: 20 },
    { name: '产品3', price: 30 }
  ];

  getCartItems() {
    return this.cartItems;
  }
}