Javascript 角度测量中的距离计算

我正在用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>

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

以上代码仅供参考，整个代码位于工作示例中

要求： 在本例中，您可以看到“选择”下拉列表最初显示“选择一辆车”，在选择两辆车中的任何一辆后，您将根据表中的“从”和“到”公里数获得该车的每公里车费

此表后有三个下拉框，分别为“从地点到地点”、“行驶总距离”，还有一个空输入框，分别为“总票价”

我需要的是，如果用户选择

车辆1（车辆）、位置A（从位置）、位置C（到位置）、20公里（总行驶距离）

，则总票价输入需要更新为350

根据上述选择（其中一辆车的总行驶距离20Km），计算结果如下：

对于前5公里（0-5），车费为10/km，因此5*10=50，而后15公里（6-20）车费为20/km，因此15*20=300

所以总票价是50+300=350

上面给出的场景只是一个例子，如果我选择第二辆车，那么票价需要根据其公里数和每公里票价计算

如果选择如上所述，则总票价输入值

<input type="number"
          placeholder="Fare Per Km" 
          formControlName="farePerKm">

---

给你。为了解决您的问题，我只输入了我必须添加或调整的代码。请注意，这不是一个完整的解决方案，而是一个提示，让你在正确的方向

在

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

选择一辆车
{{vehicle.vehicleName}
总行程
10公里
20公里
30公里
20公里

请注意，您在大多数代码中都写错了“未定义”。我在这里更正了它。否则，下拉列表将在开始时不显示“选择…”文本

使用此代码可以看到，通过选择车辆并单击距离，当前车辆的票价将显示在total fare文本字段中

给出这个选项，您就可以在

onDistanceSelection（）

内开始自己的计算了。您还可以访问此处的

selectedDistance

---

玩得开心

只需制作一个函数来计算价格

好的，在之前，你必须更好地定义“票价”，在票价必须等于到和下一个从，这是

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

嗯，用开关来选择票价有些奇怪。如果您的票价符合要求，您可以改进代码

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：您必须检查功能。e、 你可以在一个ngOnInit中-仅用于检查-写一些类似的内容

for (let distance=0;distance<30;distance++)
      console.log(distance,this.getPrice("V1",distance))

---

用于（让distance=0；distance不清楚您在寻求帮助的是哪一部分-实际计算、从表单中获取值、创建表单、使用表单的值在表中查找内容或其他内容。@HammerN'Songs，请不要为给定的结构操心，因为在我的实际应用程序中，我使用映射到cal计算旅行距离我现在已经把一切都安排在表格里了。事情是根据下拉列表中的选择来计算总票价的。。（如果我选择车辆1，从位置A到位置C，行驶距离为20，那么在总票价输入字段中需要获得附加值，值为350..只等待您的答案Eliseo，您非常乐于帮助我..请提供stackblitz Eliseo..只是您的stackblitz分叉添加了函数getPrice和添加ngOnInit。您需要st更改为在选择距离时调用该函数-我不触摸此部分-谢谢Eliseo，我认为最终部分（如票价计算）需要由我自己完成。如果可能，请在您的最后填写总票价，并在解决方案中更新stackblitz，以便对读者有用。要了解如何工作，请使用参考资料变量#distance、#vehicleID和total，在选择您可以执行的操作（更改）=“total.value=getPrice（vehicleID.value，distance.value）
getPrice(vehicleID: string, distance: number) {
    //get the fare
    let fare= this.vehicles.find(x=>x.id==vehicleID).fares;
    ....rest of the code...
}

for (let distance=0;distance<30;distance++)
      console.log(distance,this.getPrice("V1",distance))