How to Update Values Dynamically for particular row in Table based on selection of one column?

问题

I am using angular formarray to to iterate through the data. Table has 4 columns I want when I select a drop down in 3rd column data respective to that should get populate in 4th column. This is achieved, but when I try to select another drop down in the second row the the data gets wiped out for the first row as well. I need the data to be updated for that specific row only.

Below it the formarray

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

and below it function which generates data based on 3rd column selection.

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

来源：https://stackoverflow.com/questions/54264677/how-to-update-values-dynamically-for-particular-row-in-table-based-on-selection

标签

angular

html-table

angular-reactive-forms

formarray