Как динамически обновлять значения для конкретной строки в таблице на основе выбора одного столбца?

Question

Я использую угловую форму, чтобы перебрать данные. Таблица имеет 4 столбца, которые я хочу выбрать, когда я выбираю раскрывающийся список данных 3-го столбца, соответствующий тому, который должен быть заполнен в 4-м столбце. Это достигается, но когда я пытаюсь выбрать другой раскрывающийся список во второй строке, данные удаляются и для первой строки. Мне нужно обновить данные только для этой конкретной строки.

Ниже этого формара

<tbody formArrayName="idsDetails" *ngFor="let idsDetail of boothData.get('idsDetails')['controls']; let i = index;"
style="text-align:center">
<tr [formGroupName]="i">
<td width="25%" *ngIf="isPresent1"> <input formControlName="idsUnit" class="form-control" readonly></td>
<td width="25%" *ngIf="isPresent2"> <input formControlName="idsUnit" class="form-control" [(ngModel)]="idsUnitEntered"
readonly></td>
<td width="25%">
<ngx-select [items]="portNos" placeholder="Select Port No" formControlName="idsPortNo">
</ngx-select>
</td>
<td width="20%">
<ngx-select [items]="deviceList" placeholder="Select Equipment" formControlName="idsEquipment" (select)="onEquipmentSelect($event,i)">
</ngx-select>
</td>
<td width="20%">
<ngx-select [items]="equipmentData" placeholder="Select Equipment" formControlName="idsEquipmentNo">
</ngx-select>
</td>
</tr>
</tbody>

и под ним функция, которая генерирует данные на основе выбора 3-го столбца.

 onEquipmentSelect(equipment,i){
   if(equipment == 'Balance'){
    this.boothData.value.idsDetails[i].idsEquipmentNo = this.balanceData;
    this.equipmentData = this.boothData.value.idsDetails[i].idsEquipmentNo;
   }else if(equipment == 'Barcode') {
    this.boothData.value.idsDetails[i].idsEquipmentNo = this.barCodeDataList;
    this.equipmentData = this.boothData.value.idsDetails[i].idsEquipmentNo;
    }else{
      this.equipmentData = this.noDevice;
    }
  }