Angular 中的距离计算 [英] Distance Calculation in Angular
问题描述
我正在使用 angular 制作距离计算应用程序，
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:
TS:
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以上代码仅供参考，完整代码在工作示例 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.
我需要的是如果用户选择Vehicle One(车辆)，位置A(从位置)，位置C(到位置)，20KM(总行驶距离)然后总票价输入需要更新为 350 的值.
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.
根据以上选择(其中一辆车行驶的总距离为20Km)，计算结果为，
Based on the above selection (where total distance travelled was 20Km in vehicle one) the calculation will be,
对于前 5 KMS (0 - 5)，票价为 10/km 所以5*10 = 50，其中 接下来的 15 KMS (6 到 20) 票价是 20/公里 所以15*20 = 300.
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.
所以总票价是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">
需要根据上面给出的示例使用上述计算值 350 进行更新，这取决于选择.
needs to be updated with the above calculated value of 350 as per the above given example which vary depends on selection.
请不要担心给定的结构，因为在我的实际应用程序中，我正在使用地图来计算行进的距离，我现在已将其全部放入表单中.
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.
下面给出的是一辆车的拆分.因此，如果我乘坐这辆车行驶 20 公里，那么对于任何其他不同的车辆，总票价需要为 350(例如).
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.
嗯，之前，你必须更好地定义票价"，票价必须等于 to 和 next from，那就是
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
另外，用车辆V1"制作6Km"的价格是多少?
else, what is the price of make "6Km" with vehicle "V1"?
功能很简单:
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...
}
注意:在您的票价中，from、to 和 farePerKm 是字符串，您必须使用+"转换为数字注意2:您必须检查该功能.例如你可以在 ngOnInit - 只用于检查 - 写一些像
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))
这篇关于Angular 中的距离计算的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
