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

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并以此进行比较。 例如

...

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

} 

...