html-从动态表单内容角度获取值

概述我正在使用查询飞行数据的后端API,然后循环浏览并显示数据.我的模板代码看起来像这样...<form novalidate #form='ngForm'> <div class='flight-table'> <header fxLayout='row' fxLayoutAlign='space-betwee

我正在使用查询飞行数据的后端API,然后循环浏览并显示数据.我的模板代码看起来像这样…

<form novalIDate #form="ngForm">    <div >      <@R_502_5548@ 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>      </@R_502_5548@>      <main>        <div  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  fxLayout="row" fxLayoutAlign="space-between">           <p  fxFlex="75"><strong>Total transport</strong></p>           <p  fxFlex="25"><strong>AED 0</strong></p>         </div>      </main>    </div></form>

当用户从pax下拉列表中选择许多票证时,我想同时更新行总数和总运输量.我需要能够获取pax选择框的值并将其乘以flight [‘flightPrice’],但我不太清楚该怎么做,因为我不知道航班中有多少物品数组.您看到的只是一行,但可能还会更多.

另外,我想捕获每一行的值.我已经考虑过要像这样为每行或某事添加一个隐藏的表单字段.我不太确定该如何处理.
有更好的办法吗？

更新资料

我正在努力捕捉如何捕获选定的行.我试图像这样在每行中添加一个隐藏的输入字段.

<input   matinput   [name]="flight['flightname']-flight['flightClass']-pax-flight['flightPrice']"   [value]="total"  ngModel> 

这似乎不起作用.目标是将每个选定的行存储在这样的对象中…
破折号将flightname,flightClass,pax和flightPrice分开,其值为总计(pax * flightPrice),而pax为乘客人数.

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

我应该怎么做？最佳答案我建议您为购物篮项目创建一个专用组件.
然后,您将拥有一个可以使用的隔离范围,即使用[[ngModel)]在组件上设置选定的pax数量(为此您必须在应用程序/功能模块中导入FormsModule).
然后,您可以重用该值来计算航班的总价.

要获得整个运输的总计(所有购物篮项目的总和),您还需要在组件之间传递数据.跟踪您的购物篮项目的BasketService可以帮助您解决此问题.我创建了一个小技巧来演示如何执行此 *** 作：https://stackblitz.com/edit/angular-tpenou

相关部分是：

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  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>

和BasketService：

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);  }}

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

<form novalIDate #form="ngForm">  <div >    <@R_502_5548@ 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>    </@R_502_5548@>    <main>      <app-basket-item [flight]="flight" *ngFor="let flight of data.flights; let i = index">      </app-basket-item>       <div  fxLayout="row" fxLayoutAlign="space-between">         <p  fxFlex="75"><strong>Total transport</strong></p>         <p  fxFlex="25"><strong>AED {{transportTotal}}</strong></p>       </div>    </main>  </div></form>

总结

以上是内存溢出为你收集整理的html-从动态表单内容角度获取值 全部内容，希望文章能够帮你解决html-从动态表单内容角度获取值 所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。