Question

我有4个下拉元素，其中有10个安全问题。安全问题来自数据库，只有一个电话。我采取了一系列安全问题，每个数组元素由10个问题组成。

<div class="form-group form-group-sm col-sm-6">
                        <div class="row col-sm-9">                            
                                <select class="form-control selectpicker selector" name="selectedQuestion1" [ngModel]="selectedQuestion1" (ngModelChange)="filterSecurityQuestions($event,0)">
                                    <option [value]="0"  disabled selected>Select Secuirty Question1</option>
                                    <option *ngFor="let securityQuestion of securityQuestions[0]"  [value]="securityQuestion.SecurityQuestionID" >
                                        {{securityQuestion.Question}}
                                    </option>
                                </select>  <br />                       
                            <div>
                                <input type="text" class="form-control" id="first_name" name="securityAnswer1" placeholder="Your first security answer">
                            </div>
                        </div>
                    </div>
                    <div class="form-group form-group-sm col-sm-6">
                        <div class="row col-sm-9">
                            <select class="form-control selectpicker"  name="selectedQuestion2" [ngModel]="selectedQuestion2" (ngModelChange)="filterSecurityQuestions($event,1)" >
                                <option [value]="0"  disabled selected>Select Secuirty Question2</option>
                                <option *ngFor="let securityQuestion of securityQuestions[1]" [value]="securityQuestion.SecurityQuestionID">
                                    {{securityQuestion.Question}}
                                </option>
                            </select>      <br/>
                            <div>
                                <input type="text" class="form-control" id="last_name" name="securityAnswer2" placeholder="Your second security answer">
                            </div>
                        </div>
                    </div>
                    <div class="form-group form-group-sm col-sm-6">
                        <div class="row col-sm-9">
                            <select class="form-control selectpicker"  name="selectedQuestion3" [ngModel]="selectedQuestion3" (ngModelChange)="filterSecurityQuestions($event,2)" >
                                <option [value]="0"  disabled selected>Select Secuirty Question3</option>
                                <option *ngFor="let securityQuestion of securityQuestions[2]" [value]="securityQuestion.SecurityQuestionID">
                                    {{securityQuestion.Question}}
                                </option>
                            </select>      <br/>
                            <div>
                                <input type="text" class="form-control" id="Street" name="securityAnswer3" placeholder="Your third security answer">
                            </div>
                        </div>
                    </div>
                    <div class="form-group form-group-sm col-sm-6">
                        <div class="row col-sm-9">
                            <select class="form-control selectpickerc"  name="selectedQuestion4" [ngModel]="selectedQuestion4" (ngModelChange)="filterSecurityQuestions($event,3)" >
                                <option [value]="0"  disabled selected>Select Secuirty Question4</option>
                                <option *ngFor="let securityQuestion of securityQuestions[3]" [value]="securityQuestion.SecurityQuestionID">
                                    {{securityQuestion.Question}}
                                </option>
                            </select>      <br/>
                            <div>
                                <input type="text" class="form-control" id="City" name="securityAnswer4" placeholder="Your fourth security answer">
                            </div>
                        </div>
                    </div>

以下是在下拉列表中添加和删除项目的打字稿代码。在下面的代码中，questionNo是下拉列表中选择的项目（例如1,2，.... 10），securityQtnDropdownNo是下拉数字（比如1,2,3,4）。

 filterSecurityQuestions(questionNo: number, securityQtnDropdownNo: number) {
        var duplicateSecurityQuestions = [];
        var min: number = 0;
        var max: number = 3;

        duplicateSecurityQuestions = this.tempArray.map(x => Object.assign({}, x));

        while (securityQtnDropdownNo < max) {
            for (let i = 0; i < this.securityQuestions[max].length; ++i) {
                if (this.securityQuestions[max][i].SecurityQuestionID == questionNo) {
                    this.securityQuestions[max].splice(questionNo-1, 1);
                }
            }
            max--;
        }

        while (securityQtnDropdownNo > min) {
            for (let j = 0; j < this.securityQuestions[min].length; ++j) {
                if (this.securityQuestions[min][j].SecurityQuestionID == questionNo) {
                    this.securityQuestions[min].splice(questionNo-1, 1);
                }
            }
            min++;
        }
    }

基本上，如果我在第一个下拉列表中选择一个元素，则必须在其余的下拉列表中删除相同的元素。并且，如果我在同一下拉列表中更改元素，则应将之前的项目（在下拉列表中更改之前的项目）添加到其余的下拉列表中，并删除其余下拉列表中的最新选定项目（在dropdown1中选择）。

请注意，API调用实际上会获得10个具有securityID和securityQuestion的对象。当我从dropdown $ event获得selectedValue时，我可以轻松地从下拉列表的其余部分中删除项目。但是，我不知道如何添加项目，因为我没有以前的值（即在下拉列表中发生更改事件之前的值）。请帮助我。

如何根据angular2

0 个答案: