Angular 中的距离计算
Distance Calculation in Angular
我正在使用 angular 制作距离计算应用程序，其中有，
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]
}));
});
}
}
以上代码仅供参考，完整代码在工作示例 https://stackblitz.com/edit/disable-group-control-value-on-another-control-value-for-itrxah
要求：
在此示例中，您可以看到 select 下拉列表最初显示选择一辆车，在选择两辆车中的任何一辆车后，您将根据从和到公里的基础上获得车辆的每公里票价table.
在此 table 之后，有三个下拉菜单显示 从位置、到位置、行驶的总距离 和一个空的输入框显示 总票价.
我需要的是，如果用户 selects Vehicle One(vehicle), Location A (From Location), Location C (To Location), 20KM (Total Distance travelled) 那么输入的总票价需要更新为 350。
基于上述 selection（车辆 1 的总行驶距离为 20Km），计算结果为，
前 5 公里 (0 - 5)，票价为 10 / 公里所以 5*10 = 50，其中接下来的 15 公里（6 到 20） 票价是 20/公里 所以 15*20 = 300.
所以总票价是 50 + 300 = 350
以上给出的场景只是一个例子，如果我选择第二辆车，那么票价需要根据它的公里数和fare/km来计算。
如果selection像上面说的那么总票价输入值，
<input type="number"
placeholder="Fare Per Km"
formControlName="farePerKm">
需要根据上面给出的示例使用上述计算值 350 进行更新，具体取决于 selection。
编辑：
请不要理会给定的结构，因为在我的实际应用程序中，我正在使用地图来计算行进的距离，我现在已经将所有内容都放在表格中了。
唯一的要求是我需要获得乘客在车辆中行驶的总距离的总票价值，该车辆根据给定的公里计算票价。
下面给出的是拆开的车辆一。因此，如果我乘坐这辆车行驶 20 公里，那么总票价需要 350（例如），对于任何其他不同的分开的车辆也是如此。
From Distance (Km) To Distance (Km) Fare Per Kilometer
0 5 10
6 20 20
给你。我只输入了我必须添加或调整的代码才能解决您的问题。请注意，这不是一个完整的解决方案，而是一个让您朝着正确方向前进的提示。
在您的 AppModule 中添加 FormsModule 以便能够使用 ngModule 指令。
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
@NgModule({
imports: [ BrowserModule, ReactiveFormsModule, FormsModule ],
...
在您的 TS 文件中添加以下变量：
protected totalFare: string;
protected chosenVehicle: any;
protected selectedDistance: any;
同时扩展您的车辆列表
vehicles: any = [
{ id: "V1", vehicleName: "Vehicle One", fares: [{ from: "0", to: "5", farePerKm: "10" }, { from: "6", to: "20", farePerKm: "20" }] },
{ id: "V2", vehicleName: "Vehicle Two", fares: [{ from: "0", to: "10", farePerKm: "15" }, { from: "11", to: "20", farePerKm: "12" }] }
]
并添加以下方法
protected onDistanceSelection(): void {
const vehicle = this.vehicles.filter(el => el.id === this.chosenVehicle)[0];
this.totalFare = vehicle.fares[0].farePerKm;
}
在您的 HTML- 文件中进行以下调整：
<select (change)="selectedValues($event)" [(ngModel)]="chosenVehicle">
<option value="undefined" disabled selected> Choose a vehicle </option>
<option *ngFor="let vehicle of vehicles" [value]="vehicle.id"> {{ vehicle.vehicleName }} </option>
</select>
<select (change)="onDistanceSelection()" [(ngModel)]="selectedDistance">
<option value="undefined" disabled selected> Total distance of travel</option>
<option value="10"> 10 KM </option>
<option value="20"> 20 KM </option>
<option value="30"> 30 KM </option>
<option value="40"> 20 KM </option>
</select>
<input type="text" [(ngModel)]="totalFare" placeholder="Total fare">
请注意，您的大部分代码 "undefined" 都写错了。我在这里纠正了它。否则，下拉菜单将在开始时不显示 "Select..." 文本。
使用此代码可以看到，通过选择车辆并单击距离，当前车辆的 farePerKm 会显示在总票价文本字段中。
有了这个，你应该可以在里面开始自己计算了onDistanceSelection()。您还可以在此处访问 selectedDistance。
玩得开心！ ;)
只做一个函数来计算价格。
嗯，之前，你一定要定义好"fares"，在fares中必须等于to和next from，也就是
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
否则，车辆行驶“6Km”的价格是多少"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;
}
嗯，用转select的票价有些奇怪。如果您的票价为
，您可以改进代码
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" }] }
然后你可以把函数改成
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 中 - 仅用于检查 - 写一些像
for (let distance=0;distance<30;distance++)
console.log(distance,this.getPrice("V1",distance))
我正在使用 angular 制作距离计算应用程序，其中有，
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]
}));
});
}
}
以上代码仅供参考，完整代码在工作示例 https://stackblitz.com/edit/disable-group-control-value-on-another-control-value-for-itrxah
要求： 在此示例中，您可以看到 select 下拉列表最初显示选择一辆车，在选择两辆车中的任何一辆车后，您将根据从和到公里的基础上获得车辆的每公里票价table.
在此 table 之后，有三个下拉菜单显示 从位置、到位置、行驶的总距离 和一个空的输入框显示 总票价.
我需要的是，如果用户 selects Vehicle One(vehicle), Location A (From Location), Location C (To Location), 20KM (Total Distance travelled) 那么输入的总票价需要更新为 350。
基于上述 selection（车辆 1 的总行驶距离为 20Km），计算结果为，
前 5 公里 (0 - 5)，票价为 10 / 公里所以 5*10 = 50，其中接下来的 15 公里（6 到 20） 票价是 20/公里 所以 15*20 = 300.
所以总票价是 50 + 300 = 350
以上给出的场景只是一个例子，如果我选择第二辆车，那么票价需要根据它的公里数和fare/km来计算。
如果selection像上面说的那么总票价输入值，
<input type="number"
placeholder="Fare Per Km"
formControlName="farePerKm">
需要根据上面给出的示例使用上述计算值 350 进行更新，具体取决于 selection。
编辑： 请不要理会给定的结构，因为在我的实际应用程序中，我正在使用地图来计算行进的距离，我现在已经将所有内容都放在表格中了。
唯一的要求是我需要获得乘客在车辆中行驶的总距离的总票价值，该车辆根据给定的公里计算票价。
下面给出的是拆开的车辆一。因此，如果我乘坐这辆车行驶 20 公里，那么总票价需要 350（例如），对于任何其他不同的分开的车辆也是如此。
From Distance (Km) To Distance (Km) Fare Per Kilometer
0 5 10
6 20 20
给你。我只输入了我必须添加或调整的代码才能解决您的问题。请注意，这不是一个完整的解决方案，而是一个让您朝着正确方向前进的提示。
在您的 AppModule 中添加 FormsModule 以便能够使用 ngModule 指令。
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
@NgModule({
imports: [ BrowserModule, ReactiveFormsModule, FormsModule ],
...
在您的 TS 文件中添加以下变量：
protected totalFare: string;
protected chosenVehicle: any;
protected selectedDistance: any;
同时扩展您的车辆列表
vehicles: any = [
{ id: "V1", vehicleName: "Vehicle One", fares: [{ from: "0", to: "5", farePerKm: "10" }, { from: "6", to: "20", farePerKm: "20" }] },
{ id: "V2", vehicleName: "Vehicle Two", fares: [{ from: "0", to: "10", farePerKm: "15" }, { from: "11", to: "20", farePerKm: "12" }] }
]
并添加以下方法
protected onDistanceSelection(): void {
const vehicle = this.vehicles.filter(el => el.id === this.chosenVehicle)[0];
this.totalFare = vehicle.fares[0].farePerKm;
}
在您的 HTML- 文件中进行以下调整：
<select (change)="selectedValues($event)" [(ngModel)]="chosenVehicle">
<option value="undefined" disabled selected> Choose a vehicle </option>
<option *ngFor="let vehicle of vehicles" [value]="vehicle.id"> {{ vehicle.vehicleName }} </option>
</select>
<select (change)="onDistanceSelection()" [(ngModel)]="selectedDistance">
<option value="undefined" disabled selected> Total distance of travel</option>
<option value="10"> 10 KM </option>
<option value="20"> 20 KM </option>
<option value="30"> 30 KM </option>
<option value="40"> 20 KM </option>
</select>
<input type="text" [(ngModel)]="totalFare" placeholder="Total fare">
请注意，您的大部分代码 "undefined" 都写错了。我在这里纠正了它。否则，下拉菜单将在开始时不显示 "Select..." 文本。
使用此代码可以看到，通过选择车辆并单击距离，当前车辆的 farePerKm 会显示在总票价文本字段中。
有了这个，你应该可以在里面开始自己计算了onDistanceSelection()。您还可以在此处访问 selectedDistance。
玩得开心！ ;)
只做一个函数来计算价格。
嗯，之前，你一定要定义好"fares"，在fares中必须等于to和next from，也就是
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
否则，车辆行驶“6Km”的价格是多少"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;
}
嗯，用转select的票价有些奇怪。如果您的票价为
，您可以改进代码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" }] }
然后你可以把函数改成
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 中 - 仅用于检查 - 写一些像
for (let distance=0;distance<30;distance++)
console.log(distance,this.getPrice("V1",distance))