Angular2 dependent dropdown based on selected value - node.js

Question

Here am trying to append a dependent drop down based on value drop down (you can see in my HTML code for value drop down).I have wrote a onchage method to get appear dependent dropdown in html.Here i have dependent drop down for only three(i.e, Services Performed, Products Sold, Gross Retail) selected values of my values dropdown. Now am getting the dependent dropdowns, but when i have change the another drop down i.e, 2nd or 3rd ...etc dropdown ,then the previous drop down is getting disappear and latest changed dropdown value is getting appear.
so, please help me to solve it.
my HTML code is
<table class="table table-bordered-light">
<tbody>
<tr class="grey_th">
<td>Step</td>
<td>Action</td>
<td>Value</td>
<td>Number</td>
<td>Sample Calculation</td>
</tr>
<tr *ngFor="let row of rows; let i = 'index'">
<td [innerHTML]="row.step"></td>
<td>
<select [class.disabled]="i==0" [(ngModel)]="row.operator" name="action" style="width: 100%">
<option *ngFor="let actions of actionsStaticData; let i='index'" value="{{actions.id}}" id="actions{{i}}">{{actions.action}}</option>
</select>
</td>
<td>
<tr>
<td>
<div>
<!-- here i have wrote onchange method **onValueChange()** and passing i also along with the value -->
<
[(ngModel)]="row.operand" style="width: 100%" (change)="onValueChange($event.target.value, i)">
<option *ngFor="let values of valuesStaticData; let i='index'" value="{{values.value}}" id="values{{i}}">{{values.value}}</option>
<option value="-" disabled="disabled">-----</option>
<option *ngFor="let values of scalesData; let i='index'" value="{{values.Id}}" id="values{{i}}">{{values.Name}}</option>
</select>
</div>
</td>
<td>
<div class="ml-15" *ngIf='rowLength == i'>
<select [(ngModel)]="row.operandSubOption" style="width: 100%">
<option *ngFor="let values of servicesList; let i='index'" value="{{values.value}}" id="values{{i}}">{{values.Name}}</option>
</select>
</div>
</td>
</tr>
</td>
<td>
<input type="text" [(ngModel)]="row.numeral">
</td>
<td> {{row.result}}{{toFix}}</td>
<td>
<a style="color: #000;" (click)="addRows()" *ngIf='showPlus == true'>
<span class="f-plus">
<i class="fa fa-plus" aria-hidden="true"></i>
</span>
</a>
<a *ngIf='showPlus == false'>
<!-- <span class="del">
<i class="fa fa-plus disable" aria-hidden="true"></i>
</span> -->
</a>
<a (click)="deleteFieldValue(row, i)" *ngIf='hideDelete==true' data-toggle="tooltip" data-placement="top" title="Remove">
<span class="f-minus">
<i class="fa fa-trash-o" aria-hidden="true"></i>
</span>
</a>
</td>
</tr>
</tbody>
</table>
my typesript code is
onValueChange(value, i) {
if (value === 'Services Performed') {
this.rowLength = i;
this.servicesList = '';
this.setupCompMethodService.getServices()
.subscribe(data => {
this.servicesList = data['result'];
this.rows[i]['operandSubOption'] = this.servicesList[0].Name;
});
}
if (value === 'Products Sold') {
this.rowLength = i;
this.servicesList = '';
this.setupCompMethodService.getInventoryGroupData()
.subscribe(data => {
this.servicesList = data['result'];
this.rows[i]['operandSubOption'] = this.servicesList[0].Name;
});``
}
if (value === 'Gross Retail') {
this.rowLength = i;
this.servicesList = '';
this.setupCompMethodService.getProductLineDetails()
.subscribe(data => {
this.servicesList = data['result'];
this.rows[i]['operandSubOption'] = this.servicesList[0].Name;
});
}
}