如何在angular formarray和formcontrol中计算总价格

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormArray } from '@angular/forms';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
  form: FormGroup;

  constructor() {
    this.form = new FormGroup({
      prices: new FormArray([])
    });
  }

  ngOnInit() {
    // 添加初始的价格输入框
    this.addPriceInput();
  }

  addPriceInput() {
    // 向FormArray中添加一个新的价格输入框
    const prices = this.form.get('prices') as FormArray;
    prices.push(new FormControl());
  }

  removePriceInput(index: number) {
    // 从FormArray中移除指定位置的价格输入框
    const prices = this.form.get('prices') as FormArray;
    prices.removeAt(index);
  }

  calculateTotalPrice() {
    // 计算总价格
    const prices = this.form.get('prices') as FormArray;
    let total = 0;
    prices.controls.forEach(control => {
      total += parseFloat(control.value);
    });
    return total;
  }
}

<form [formGroup]="form">
  <div formArrayName="prices">
    <div *ngFor="let price of form.controls.prices.controls; let i = index">
      <input type="number" [formControlName]="i">
      <button (click)="removePriceInput(i)">Remove</button>
    </div>
  </div>
  <button (click)="addPriceInput()">Add Price</button>
</form>

<p>Total Price: {{ calculateTotalPrice() }}</p>