Html 从动态表单内容中获取值

我正在使用一个后端API查询飞行数据，然后循环并显示数据。我的模板代码如下所示

<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)">
              <mat-option *ngFor="let pax of counter" [value]="pax">{{ pax }} </mat-option>
              </mat-select>
           </p>
           <p fxFlex="25">AED 0</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 0</strong></p>
         </div>
      </main>
    </div>
</form>

这似乎不起作用。目标是将每个选定行存储在一个对象中，如。。。 破折号将

flightName

、

flightClass

、

pax

和

flightPrice

分开，值为

总计（pax*flightPrice）

和pax乘客数量

flights: {
  lufthansa-business-2-60: 120,
  flyEmirates-first-3-50: 150
}

---

我应该怎么做呢？

我建议您为您的购物篮项目创建一个专用组件。 然后，您可以使用一个独立的作用域，即使用

[（ngModel）]

在组件上设置所选的pax数量（为此，您必须在应用程序/功能模块中导入

FormsModule

）。 然后可以重用该值来计算航班的总价

要获得整个传输的总数（所有篮子项目的总和），还需要在组件之间传递数据。一个

BasketService

跟踪你的篮子物品可以帮助你做到这一点。我创建了一个小stackblitz来演示如何做到这一点：

有关部分包括：

export class BasketItemComponent implements OnDestroy {

  @Input() flight: Flight;
  paxOptions = [0, 1, 2, 3, 4];
  pax = 0;

  constructor(private  basketService: BasketService) {
    this.basketService.registerBasketItemComponent(this);
  }

  ngOnDestroy(): void {
    this.basketService.removeBasketItemComponent(this);
  }

  get total() {
    return this.flight.flightPrice * this.pax;
  }

}

以及模板：

<div class="flights-body--row" fxLayout="row" fxLayoutAlign="space-between" >
    <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)]="pax">
        <mat-option *ngFor="let pax of paxOptions" [value]="pax">{{ pax }} </mat-option>
        </mat-select>
     </p>
     <p fxFlex="25">AED {{ total }}</p>
</div>

您还必须更改for循环以使用新创建的自定义组件：

<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>
      <app-basket-item [flight]="flight" *ngFor="let flight of data.flights; let i = index">

      </app-basket-item>

       <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 {{transportTotal}}</strong></p>
       </div>
    </main>
  </div>
</form>

飞行
等级
价格（AED）
圣像牌
全部的
总体运输

AED{{{transportTotal}

老兄，非常感谢你的回答。解决方案似乎比我希望的要复杂得多。可以再短一点吗？@NelsonKing当然你可以用短一点的方式来做，但从可维护性的角度来看，这并不一定理想。在stackblitz上创建了另一个版本：我听到了。非常感谢。@NelsonKing我在pax元素上用一个更改侦听器修改了后一个stackblitz（），当pax的数量发生变化时，它会在

AppComponent

上填充一个

selectedFlights

对象。看一看，如果你有任何问题，请告诉我。（注意

this.selectedFlights

的

console.log

，它以您想要的结构打印对象）@NelsonKing可能是typescript在咆哮，因为

reduce

实际上是map和reduce的组合，类型推断对此有问题。如果您这样编写，它是否有效：

this.data.flights.map（f=>Number.parseFloat（f['flightPrice']）*（f['pax']| | 0））.reduce（（total，flightPrice）=>total+flightPrice，0）？如果这不是问题所在，请用我的stackblitz来模拟从API返回的数据，这样我就有了起点
export class BasketService {

  basketItems: BasketItemComponent[] = [];

  constructor() { }

  get total() {
    return this.basketItems.reduce( (a, b) => a + b.total, 0);
  }

  registerBasketItemComponent(c: BasketItemComponent) {
    this.basketItems.push(c);
  }

  removeBasketItemComponent(c: BasketItemComponent) {
    this.basketItems.splice(this.basketItems.indexOf(c), 1);
  }
}

<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>
      <app-basket-item [flight]="flight" *ngFor="let flight of data.flights; let i = index">

      </app-basket-item>

       <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 {{transportTotal}}</strong></p>
       </div>
    </main>
  </div>
</form>