角度距离计算 [英] Distance Calculation in Angular
问题描述
我正在使用角度来制作距离计算应用程序，
Html：
< form [formGroup] =form* ngIf =showForm>
< div formArrayName =distance>
< table>
< thead>
< th>距离（Km）< / th>
< th>到距离（Km）< / th>
< th>每公里票价< / th>
< / thead>
< tbody>
< tr
* ngFor =let form of form.get（'distance'）。controls; let i = index
[formGroupName] =i>
< td>
< input type =number
placeholder =From
formControlName =from>
< / td>
< td>
< input type =number
placeholder =To
formControlName =to>
< / td>
< td>
< input type =number
placeholder =Fare Per Km
formControlName =farePerKm>
< / td>
< / tr>
< / tbody>
< / table>
< / div>
< / form>
TS：
selectedValues（e）{
this.showForm = true;
this.form = this.fb.group（{
distance：this.fb.array（[]），
}）;
const control = this.form.controls.distance as FormArray;
if（e.target.value ===V1）{
this.vehicleOne.forEach（data => {
control.push（this.fb.group（{
来自：[data.from，Validators.required]，
to：[data.to，Validators.required]，
farePerKm：[data.farePerKm，Validators.required]
}））;
}）;
}
else if（e.target.value ===V2）{
this.vehicleTwo.forEach（data => {
control.push（this。 fb.group（{
from：[data.from，Validators.required]，
to：[data.to，Validators.required]，
farePerKm：[data.farePerKm，Validators。必填]
}））;
}）;
}
}
以上代码仅供参考，全部代码在工作示例 https://stackblitz.com/edit/disable-group-control-value-on-another-control-value-for-itrxah
要求：
在此示例中，您可以看到有一个选择下拉列表最初显示选择车辆，在选择两辆车中的任何一辆时，您将获得每公里票价对于基于表中的从和到基础的车辆。
在此表之后有三个下拉列表从位置，到位置，总距离旅行，空输入框显示总票价。
我需要的是用户选择第一辆车（车辆），位置A（从位置），位置C（到Locati on），20KM（行驶总距离）然后总票价输入需要更新为350.
基于以上选择（在车辆1中行驶的总距离 20Km ）计算将是，
对于前5 KMS（0 - 5），票价是10 / km所以 5 * 10 = 50 ，其中接下来的15 KMS（6到20）票价是20 / km所以 15 * 20 = 300 。
所以总票价 50 + 300 = 350
以上给出的情况仅作为示例，如果我选择第二辆车，那么票价需要根据它的公里分割和票价/公里来计算。
如果选择如上所述那么总票价输入值，
<输入type =number
placeholder =每公里票价
formControlName =farePerKm>
需要根据上面给出的示例使用上面计算的350值进行更新，具体取决于选择。
编辑：
请不要理会给定的结构，因为在我的实际应用中我使用地图来计算我已经把所有的东西都变成了现在的状态。
只有要求我需要得到总行驶距离的总票价值由车辆上的骑车人根据公里计算的票价计算吐出的票价。
下面给出的是车辆拆分。因此，如果我在这辆车中行驶20公里，则总票价需要为350（例如）同样适用于任何其他不同拆分的车辆。
从距离（公里）到距离（公里）每公里票价
0 5 10
6 20 20
只需设定一个计算价格的功能。
<嗯，之前，你必须更好地定义票价，票价必须等于和下一个，那是
vehicleOne：any = [{from：0，to：5，farePerKm：10}，
{from：5，to：20，farePerKm：20 }，//< - from等于
以上的to{from：20，to：50，farePerKm：5}] //< - from 等于到以上
否则，制造6Km的价格是多少？ V1？
功能是easy：
getPrice（vehicleID：string，distance：number）{
//获得票价
让票价：任何[];
开关（vehicleID）{
caseV1：
fare = this.vehicleOne;
休息;
caseV2：
fare = this.vehicleTwo;
休息;
}
让价格：数字= 0;
让distanceCal =距离;
fare.forEach（x => {
let incprice = 0;
if（distanceCal> 0）{
if（distance> + x.to）
incprice + =（（+ x.to） - （+ x.from））*（+ x.farePerKm）;
else
incprice + =（距离 - （+ x.from）） *（+ x.farePerKm）;
价格+ = incprice
distanceCal - =（+ x.to） - （+ x.from）
}
}）
if（distanceCal> 0）//如果距离大于最后一个票价
price + = distanceCal *（+ fare [fare.length-1] .farePerKm）//使用最后一个farePerKm
退货价格;
}
好吧，使用开关选择票价有些奇怪。如果您的票价如此，您可以改善代码
vehicles：any = [
{id：V1， vehicleName：Vehicle One，票价：[{from：0，to：5，farePerKm：10}，{from：5，to：20，farePerKm：20}] }，
{id：V2，vehicleName：Vehicle Two，票价：[{from：0，to：10，farePerKm：15}，{from：10， to：20，farePerKm：12}]}
然后你可以改变功能as
getPrice（vehicleID：string，distance：number）{
//获取票价
let fare = this.vehicles.find（x => x.id == vehicleID）.fares;
....其余代码...
}
注意：如你的票价，从，到，并且farePerKm是字符串，你必须使用+转换为数字
注意2：你必须检查该功能。例如你可以在一个ngOnInit -only中查询一些像
for（let distance = 0; distance< 30; distance ++）
console.log（距离，this.getPrice（V1，距离））
I am making a distance calculation application using angular which has,
Html:
<form [formGroup]="form" *ngIf="showForm">
<div formArrayName="distance" >
<table>
<thead>
<th> From Distance (Km) </th>
<th> To Distance (Km) </th>
<th> Fare Per Kilometer </th>
</thead>
<tbody>
<tr
*ngFor="let item of form.get('distance').controls; let i = index"
[formGroupName]="i">
<td>
<input type="number"
placeholder="From"
formControlName="from">
</td>
<td>
<input type="number"
placeholder="To"
formControlName="to">
</td>
<td>
<input type="number"
placeholder="Fare Per Km"
formControlName="farePerKm">
</td>
</tr>
</tbody>
</table>
</div>
</form>
TS:
selectedValues(e) {
this.showForm = true;
this.form = this.fb.group({
distance: this.fb.array([]),
});
const control = this.form.controls.distance as FormArray;
if (e.target.value === "V1") {
this.vehicleOne.forEach(data => {
control.push(this.fb.group({
from: [data.from, Validators.required],
to: [data.to, Validators.required],
farePerKm: [data.farePerKm, Validators.required]
}));
});
}
else if (e.target.value === "V2") {
this.vehicleTwo.forEach(data => {
control.push(this.fb.group({
from: [data.from, Validators.required],
to: [data.to, Validators.required],
farePerKm: [data.farePerKm, Validators.required]
}));
});
}
}
The above code is just for the reference, the entire code is here at the working example https://stackblitz.com/edit/disable-group-control-value-on-another-control-value-for-itrxah
Requirement: In this example you can see that there is a select dropdown initially shows choose a vehicle, upon choosing any one of the two vehicle you will get the fare per kilometer for the vehicle based on the from and to km basis in a table.
After this table there is a three dropdown says From Location, To Location, Total distance Travelled and an empty input box says total fare.
Thing i am in the need is if user selects Vehicle One(vehicle), Location A (From Location), Location C (To Location), 20KM (Total Distance travelled) then the total fare input needs to be updated with the value of 350.
Based on the above selection (where total distance travelled was 20Km in vehicle one) the calculation will be,
For the first 5 KMS (0 - 5), the fare is 10 / km so 5*10 = 50, where for next 15 KMS (6 to 20) the fare is 20 / km so 15*20 = 300.
So total fare was 50 + 300 = 350
The above given scenario is just for example and like this if i choose second vehicle then the fare needs to get calculated according to it km split up and fare/km.
If the selection was like the above said then total fare input value,
<input type="number"
placeholder="Fare Per Km"
formControlName="farePerKm">
needs to be updated with the above calculated value of 350 as per the above given example which vary depends on selection.
Edit: Please don't bother about the given structure because in my real application i am using maps to calculate the distance travelled i have made it everything inside form now.
Only requirement is i need to get the total fare value of the total distance travelled by a rider in a vehicle which has fare calculation spit up based on km as like given.
The below given is vehicle one split up. So if i am travelling in this vehicle one for 20km then total fare needs to be 350 (For eg) likewise for any other vehicle different split up.
From Distance (Km) To Distance (Km) Fare Per Kilometer
0 5 10
6 20 20
just make a function to calculate price.
Well, before, you must defined better the "fares", in the fares must be equal the to and the next from, that's
vehicleOne: any = [{ from: "0", to: "5", farePerKm: "10" },
{ from: "5", to: "20", farePerKm: "20" }, //<--"from" is equal to "to" above
{ from: "20", to: "50", farePerKm: "5" }] //<--"from" is equal to "to" above
else, what is the price of make "6Km" with vehicle "V1"?
The function is easy:
getPrice(vehicleID: string, distance: number) {
//get the fare
let fare: any[];
switch (vehicleID) {
case "V1":
fare = this.vehicleOne;
break;
case "V2":
fare = this.vehicleTwo;
break;
}
let price: number = 0;
let distanceCal = distance;
fare.forEach(x => {
let incprice=0;
if (distanceCal > 0) {
if (distance > +x.to)
incprice += ((+x.to) - (+x.from)) * (+x.farePerKm);
else
incprice += (distance-(+x.from)) * (+x.farePerKm);
price+=incprice
distanceCal -= (+x.to) - (+x.from)
}
})
if (distanceCal>0) //If the distance if greater than the last fare
price+=distanceCal * (+fare[fare.length-1].farePerKm) //use the last farePerKm
return price;
}
Well, using a switch to select the fare is some strange. You can improve the code if your fares goes as
vehicles: any = [
{ id: "V1", vehicleName: "Vehicle One", fares: [{ from: "0", to: "5", farePerKm: "10" }, { from: "5", to: "20", farePerKm: "20" }] },
{ id: "V2", vehicleName: "Vehicle Two", fares: [{ from: "0", to: "10", farePerKm: "15" }, { from: "10", to: "20", farePerKm: "12" }] }
And then you can change the function as
getPrice(vehicleID: string, distance: number) {
//get the fare
let fare= this.vehicles.find(x=>x.id==vehicleID).fares;
....rest of the code...
}
NOTE: as in your fares, from,to and farePerKm are strings, you must convert to number using "+" NOTE2: you must check the function. e.g. you can in a ngOnInit -only for check- write some like
for (let distance=0;distance<30;distance++)
console.log(distance,this.getPrice("V1",distance))
这篇关于角度距离计算的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
