Angular动态表单：航班PAX选择后总计更新及数据捕获方案

我来帮你搞定这个需求，咱们一步步拆解实现：

1. 组件内定义状态变量 #

首先在你的组件类里添加几个变量，用来跟踪每行的选择、存储指定格式的对象，以及计算总运输费：

import { Component, OnInit } from '@angular/core';

@Component({
  // 你的组件元数据（如selector、templateUrl等）
})
export class FlightComponent implements OnInit {
  // 存储每行选择的PAX数量，索引与flights数组一一对应
  selectedPax: number[] = [];
  // 按照你要求的格式存储每行的选择与总价
  flightSelections: { [key: string]: number } = {};
  // 总运输费
  totalTransport = 0;
  // 你的航班数据和PAX可选数量（假设已定义）
  data = { flights: [] }; 
  counter = [1, 2, 3, 4, 5]; 

  ngOnInit(): void {
    // 初始化selectedPax数组，默认选中0（可根据需求改成1）
    this.selectedPax = new Array(this.data.flights.length).fill(0);
  }
}

2. 编写处理PAX选择的方法 #

添加两个核心方法：一个处理下拉框选择变化，另一个计算总运输费：

// 当PAX选择变化时触发
onPaxChange(flight: any, pax: number, index: number): void {
  // 更新当前行的选中PAX数量
  this.selectedPax[index] = pax;
  
  // 生成你要求格式的键：flightName-flightClass-pax-flightPrice
  const key = `${flight.flightName}-${flight.flightClass}-${pax}-${flight.flightPrice}`;
  // 计算当前行的总价
  const rowTotal = pax * flight.flightPrice;
  
  // 更新flightSelections对象
  this.flightSelections[key] = rowTotal;
  
  // 重新计算总运输费
  this.calculateTotalTransport();
}

// 计算总运输费
calculateTotalTransport(): void {
  // 将flightSelections中所有值相加得到总和
  this.totalTransport = Object.values(this.flightSelections).reduce((sum, current) => sum + current, 0);
}

3. 修改模板代码 #

更新你的模板，绑定ngModel和选择事件，实时显示行总计和总运输费：

<form novalidate #form="ngForm">
  <div class="flight-table">
    <header fxLayout="row" fxLayoutAlign="space-between">
      <div fxFlex="25">Flights</div>
      <div fxFlex="17">Class</div>
      <div fxFlex="18">Price (AED)</div>
      <div fxFlex="15">PAX</div>
      <div fxFlex="25">Total</div>
    </header>
    <main>
      <!-- 循环渲染航班行 -->
      <div 
        class="flights-body--row" 
        fxLayout="row" 
        fxLayoutAlign="space-between" 
        *ngFor="let flight of data.flights; let i = index"
      >
        <p fxFlex="25">{{flight.flightName}}</p>
        <p fxFlex="17">{{flight.flightClass}}</p>
        <p fxFlex="18">{{flight.flightPrice | number}}</p>
        <p fxFlex="15" fxLayout="column">
          <mat-select 
            placeholder="Ticket(s)" 
            [(ngModel)]="selectedPax[i]"
            (ngModelChange)="onPaxChange(flight, $event, i)"
            name="pax-select-{{i}}" <!-- 每个select需要唯一name，满足Angular表单要求 -->
          >
            <mat-option *ngFor="let pax of counter" [value]="pax">{{ pax }}</mat-option>
          </mat-select>
        </p>
        <!-- 实时显示当前行的总价 -->
        <p fxFlex="25">AED {{ selectedPax[i] * flight.flightPrice | number }}</p>
      </div>
      <!-- 总运输费行 -->
      <div class="flights-body--row" fxLayout="row" fxLayoutAlign="space-between">
        <p class="capitalize" fxFlex="75"><strong>Total transport</strong></p>
        <p class="center-text" fxFlex="25"><strong>AED {{ totalTransport | number }}</strong></p>
      </div>
    </main>
  </div>
</form>

关键说明 #

• selectedPax数组：因为航班数量不确定，用数组跟踪每行的PAX选择，索引与data.flights完全对应，确保每一行的选择独立不干扰。
• flightSelections对象：每次选择变化时生成指定格式的键，把计算后的总价作为值存入，完全符合你要求的格式。
• 实时计算：行总价直接用当前选中的PAX数量乘以航班价格，总运输费通过reduce方法累加所有行的总价，确保数据实时同步。
• 表单合规性：给每个mat-select设置唯一的name属性，满足Angular模板驱动表单的要求，避免表单报错。

这样就能完美实现你需要的功能：用户选择PAX后自动更新行总计和总运输费，同时把每行的选择数据存储成指定格式的对象。

内容的提问来源于stack exchange，提问作者Kingsley