角度距离计算

我正在使用角度制作距离计算应用程序，

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 https://stackblitz.com/edit/disable-group-control-value-on-another-control-value-for-itrxah

要求：在此示例中，您可以看到有一个选择下拉菜单最初显示选择车辆，选择两辆车中的任何一辆车后，您将根据表中的往返公里数获得该车辆每公里的票价。

在这张表之后有一个三个下拉菜单说从地点、到地点、行驶的总距离一个空的输入框显示总票价.

我需要的是如果用户选择Vehicle One(vehicle), Location A (From Location), Location C (To Location), 20KM (Total Distance travelled)那么总票价输入需要更新为值 350。

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

For the 前 5 KMS (0 - 5)，票价是10/公里所以5*10 = 50, 哪里为接下来的 15 公里（6 到 20）票价是20/公里所以15*20 = 300.

所以总票价是50 + 300 = 350

上面给出的场景只是举例，如果我选择第二辆车，那么票价需要根据公里分割和票价/公里来计算。

如果选择像上面所说的那么总票价输入值，

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

需要根据上面给出的示例使用上面计算的值 350 进行更新，该值根据选择而变化。

Edit:请不要担心给定的结构，因为在我的实际应用程序中，我正在使用地图来计算行驶的距离，我现在已经将其全部包含在表单中。

唯一要求我是否需要获取乘客乘坐车辆行驶的总距离的总票价值，该车辆的票价计算是根据给定的公里数计算的。

下面给出的是一号车的拆分情况。因此，如果我乘坐这辆车行驶 20 公里，那么总票价需要为 350 美元（例如），对于任何其他不同的车辆来说也是如此。

From Distance (Km)  To Distance (Km)    Fare Per Kilometer

0                    5                   10

6                    20                  20

只需创建一个计算价格的函数即可。

好吧，之前，你必须更好地定义“票价”，票价必须等于 to 和下一个 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

另外，用车辆“V1”制作“6Km”的价格是多少？

该功能很简单：

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

嗯，用开关来选择票价有点奇怪。如果您的票价如下，您可以改进代码

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