Question

我正在使用具有的角度的距离计算应用程序，

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

要求： 在此示例中，您会看到一个选择下拉列表最初显示了选择一辆车，选择两辆车中的任何一辆后，您将基于表格中的“从”到“公里”获得每公里的车费。

此表后面有三个下拉菜单，分别是从位置，到位置，总行进距离，并且在空的输入框中显示总票价。

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

基于上述选择（一辆车的总行驶距离为 20Km ），计算将为

对于前5 KMS（0-5），车费为10 /公里，因此 5 * 10 = 50 ，其中后15 KMS（ 6至20）。车费为20 /公里，所以 15 * 20 = 300 。

因此总票价为 50 + 300 = 350

以上给出的场景只是一个例子，如果我选择第二辆车，则需要根据公里数和票价/公里来计算票价。

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

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

根据上述示例，需要使用上述计算值350进行更新，具体取决于选择。

编辑： 请不要理会给定的结构，因为在我的实际应用程序中，我正在使用地图来计算行进的距离，而现在我已将其放置在表单中。

仅需，我需要获取骑车者乘坐的总路程的总票价值，该车辆的票价计算基于给定的公里数，如给定。

以下给出的是一辆被拆分的车辆。因此，如果我乘坐这辆车行驶20公里，则总费用也需要为350（例如），对于其他任何拆分后的车辆同样如此。

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

0                    5                   10

6                    20                  20

Answer 1

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

好吧，在此之前，您必须更好地定义“票价”，因为票价必须等于至下一个票价，这就是

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

Answer 2

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

在您的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”。我在这里更正了它。否则，这些下拉菜单在开始时将不会显示“选择...”文本。

使用此代码可以看到的是，通过选择车辆并单击距离，总车费文本字段中将显示当前车辆的farePerKm。

鉴于此，您应该可以在onDistanceSelection()内部自己开始计算。您也可以在selectedDistance上访问。

玩得开心！ ;）

角的距离计算

2 个答案: