基于另一个控制值显示值的Angular 数组

I am working on billing of product page based on product list using Angular as front end.

在这里，当我 Select 产品"苹果"时，价格应该被计算并显示在价格控制输入中. 也就是说.价格=产品价格*数量 例如，10*1=10 下面是我的组件html代码

<form [formGroup]="productFormarray" (ngSubmit)="onSubmit()">
          <div class="reg-right">
            <div class="formGroup">
              <label for="customername" class="form-label">Customer Name</label>
              <input type="text" class="form-control" id="customername" placeholder="Customer Name"
                formControlName="customername">
            </div>
            <div class="formGroup" formArrayName="productdetails">
              <div class="table-responsive">
                <table class="table table-bordered">
                  
                  <thead>
                    <tr>  <td style="width:50%">
                      Product Name
                    </td>
                    <td style="width:15%">
                      Quantity
                    </td>
                    <td style="width:20%">
                      Price
                    </td></tr>
                    </thead>
                  <tr *ngFor="let product of productdetailsarray.controls; let i=index" [formGroupName]="i">
                   
                    <td style="width:50%">
                      <div class="formGroup">
                          <select class="form-control" id="productname" formControlName="productname" name="productname" placeholder="Product Name">
                            <option disabled>select product</option>
                            <option *ngFor="let product of productlist" [ngValue]="product.productname">
                              {{product.productname}}
                            </option>
                          </select>
  
                        </div>
                    </td>
                    <td  style="width:15%">
                      <div class="formGroup">
                        <select class="form-control" id="quantit" formControlName="quantit" name="quantit">
                          <option *ngFor="let quantity of quantitylist" [ngValue]="quantity">
                            {{quantity}}
                          </option>
                        </select>
                      </div>
                    </td>
                    <td style="width:20%">
                      <div class="formGroup">
                        <input type="text" class="form-control" id="price" formControlName="price" placeholder="Price "
                          name="price" [value]="'33'">
                      </div>
                    </td>
                    <td>
                      <a type="button" class="btn btn-primary btn-sm mt-4" style="background-color: red;"
                      (click)="removeProduct(i)">Remove (-)</a>
                      </td>
                      
                    </tr>
                </table>
              </div>
              <a type="button" class="btn btn-secondary" style="background-color: green;"
              (click)="addNewProduct()">Add(+)</a>
                <br/>
           </div>
           <div class="mb-4 mt-4 col-md-12">
            <div class="formGroup">
              <label class="form-check-label">
                <input class="form-check-input" formControlName="remember" type="checkbox" name="remember"> Remember
                me
              </label>
            </div>
          </div>
           <button type="submit" class="btn btn-primary">Submit</button>
          </div>
        </form>

在我的组件打字代码下面

import { Component, OnInit, ViewChild } from '@angular/core';
import { FormGroup, FormControl, FormArray, FormBuilder, NgForm, Validators } from '@angular/forms'
import { Observable, of } from 'rxjs';
import { toArray } from 'rxjs';


@Component({
  selector: 'app-billing',
  templateUrl: './billing.component.html',
  styleUrls: ['./billing.component.css']
})


export class BillingComponent implements OnInit {

  name = 'Bill';
  productsForm!: NgForm;
  @ViewChild('productsForm') productsForminput!: NgForm;

  productFormarray: any;
  quantitylist = [0.5, 1, 1.5];
  items!: FormArray;
  ind: number = 0;
  i: number = 0;
  productlist = [{ productname: "apple", price: 10 }, { productname: "orange", price: 10 }, { productname: "lemon", price: 30 }];

  constructor(private fb: FormBuilder) {
    this.productFormarray = new FormGroup({
      customername: new FormControl('', Validators.required),
      productdetails: new FormArray([]),
      remember: new FormControl('true')
    })

  }

  addNewProduct() {
    this.items = this.productFormarray.get('productdetails') as FormArray;
    this.items.push(this.createNewProduct());
    this.productFormarray.get('productdetails').controls[this.ind].get('quantit').setValue(this.quantitylist[1]);
    this.ind = this.ind + 1;
  }

  createNewProduct(): FormGroup {
    return new FormGroup({
      productname: new FormControl('', Validators.required),
      quantit: new FormControl('1', Validators.required),
      price: new FormControl('', Validators.required)
    })
  }

  removeProduct(index: any) {
    this.items = this.productFormarray.get('productdetails') as FormArray;
    this.items.removeAt(index);

  }
  get productdetailsarray() {
    return this.productFormarray.get('productdetails') as FormArray;
  }

  ngOnInit() {
    this.addNewProduct();

  }


  onSubmit() {

  }


}

有没有人能帮我弄清楚价格价值？