Angular2依赖下拉列表基于选定的值

Question

这里我试图根据值下拉附加一个依赖下拉（你可以在我的HTML代码中看到值下拉）。我已经编写了一个onchage方法来获取html中的依赖下拉列表。这里我有依赖删除只有三个（即，已执行服务，已售出产品，总零售）选择了我的值下拉列表的值。现在我得到了依赖的下拉菜单，但是当我更改了另一个下拉列表，即第二个或第三个......等下拉菜单时，之前的下拉菜单正在消失，并且最新更改的下拉值正在显示。

所以，请帮我解决。

我的HTML代码是

<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>&nbsp;{{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>

我的typesript代码是

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