多个单选按钮具有相同的选项集

Question

我有四组单选按钮，每个按钮包含四个选项，如下面的代码所示：

    <div *ngFor="let index of [0,1,2,3]">
        <label *ngFor="let vehicle of vehicles" class="radio">
            <input type="radio" 
                   id="radio1" 
                   [value]="vehicle" 
                   (change)="updateValues(vehicles, formArray.value, index)"
                   name="vehicle" formControlName="vehicle">
            {{vehicle.name}} ({{vehicle.total_no}})
        </label>
    </div>

上述选项集中的每辆车都附有一个名称和总数。在选择车辆时，应更新总数值。如果总数为零，也应禁用该选项。

我编写了一个正确更新值的函数，但遗憾的是它还记录了其他单选按钮集的更改。

  updateValues(vehicles, form, index) {
    let x;
    let selectedVehicles = form.map(x => x.vehicle);
    if (this._prevSelectedVehicles[index] === '') {
      x = vehicles.indexOf(selectedVehicles[index]);
      vehicles[x].total_no -= 1;
      this._prevSelectedVehicles[index] = selectedVehicles[index];
      this.updateTime(form, selectedVehicles);
    } else if (
      selectedVehicles[index].name !== this._prevSelectedVehicles[index].name
    ) {
      x = vehicles.indexOf(this._prevSelectedVehicles[index]);
      vehicles[x].total_no += 1;
      x = vehicles.indexOf(selectedVehicles[index]);
      vehicles[x].total_no -= 1;
      this._prevSelectedVehicles[index] = selectedVehicles[index];
      this.updateTime(form, selectedVehicles);
    }
  }

如何确保先前div中选择的值不会更新？如果问题不清楚，还附上一个模型。

Answer 1

为每个车辆对象使用唯一ID并进行比较。 E.g。

...

if(vehicles[x].id === this._prevSelectedVehicles[index].id){

     x = vehicles.indexOf(this._prevSelectedVehicles[index]);
     vehicles[x].total_no += 1;
     x = vehicles.indexOf(selectedVehicles[index]);
     vehicles[x].total_no -= 1;
     this._prevSelectedVehicles[index] = selectedVehicles[index];

} 

...