从动态表单内容中获取值 angular
Grab values from dynamic form content angular
我正在使用查询航班数据的后端 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>
当用户从 PAX 下拉列表中选择多张票时,我想同时更新 row total
和 total transport
。我需要能够获取 PAX select box
的值并将其乘以 flight['flightPrice']
但我不太清楚该怎么做,因为我不知道其中有多少项航班数组。你看到的只是一排,但可能还有更多。
此外,我想捕获每一行的值。我考虑过为每一行或类似的东西添加一个隐藏的表单字段。我不太确定如何处理这个问题。
有没有更好的方法?
更新
我正在为如何捕获选定的行而苦恼。我试过像这样在每一行中添加一个隐藏的输入字段..
<input
matInput
[name]="flight['flightName']-flight['flightClass']-pax-flight['flightPrice']"
[value]="total"
ngModel>
这似乎行不通。目标是将每个选定的行存储在一个对象中,就像这样......
破折号分隔 flightName
、flightClass
、pax
和 flightPrice
,值为 total (pax * flightPrice)
和 pax 乘客人数。
flights: {
lufthansa-business-2-60: 120,
flyEmirates-first-3-50: 150
}
我该怎么办?
我建议您为您的购物篮项目创建一个专用组件。
然后你有一个你可以使用的独立范围,即使用 [(ngModel)]
在你的组件上设置选定的人数(你必须在你的 app/feature 模块中导入 FormsModule
) .
然后您可以重新使用该值来计算航班的总价。
要获得整个传输的总数(所有购物篮项目的总和),您还需要在组件之间传递数据。跟踪购物篮商品的 BasketService
可以提供帮助。我创建了一个小 stackblitz 来演示如何执行此操作: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 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>
和 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 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>
我正在使用查询航班数据的后端 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>
当用户从 PAX 下拉列表中选择多张票时,我想同时更新 row total
和 total transport
。我需要能够获取 PAX select box
的值并将其乘以 flight['flightPrice']
但我不太清楚该怎么做,因为我不知道其中有多少项航班数组。你看到的只是一排,但可能还有更多。
此外,我想捕获每一行的值。我考虑过为每一行或类似的东西添加一个隐藏的表单字段。我不太确定如何处理这个问题。 有没有更好的方法?
更新
我正在为如何捕获选定的行而苦恼。我试过像这样在每一行中添加一个隐藏的输入字段..
<input
matInput
[name]="flight['flightName']-flight['flightClass']-pax-flight['flightPrice']"
[value]="total"
ngModel>
这似乎行不通。目标是将每个选定的行存储在一个对象中,就像这样......
破折号分隔 flightName
、flightClass
、pax
和 flightPrice
,值为 total (pax * flightPrice)
和 pax 乘客人数。
flights: {
lufthansa-business-2-60: 120,
flyEmirates-first-3-50: 150
}
我该怎么办?
我建议您为您的购物篮项目创建一个专用组件。
然后你有一个你可以使用的独立范围,即使用 [(ngModel)]
在你的组件上设置选定的人数(你必须在你的 app/feature 模块中导入 FormsModule
) .
然后您可以重新使用该值来计算航班的总价。
要获得整个传输的总数(所有购物篮项目的总和),您还需要在组件之间传递数据。跟踪购物篮商品的 BasketService
可以提供帮助。我创建了一个小 stackblitz 来演示如何执行此操作: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 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>
和 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 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>