以角度2动态绑定下拉列表和文本框列表

Question

我有一个更改密码的要求。有一个问题下拉列表和一个文本框的答案。这将在循环中动态生成。我可以使用以下代码生成它：

<ng-template let-i="index" let-c="count" ngFor let-question [ngForOf]="QuestionModel">

<div class="col-md-8" style="padding-bottom:10px;">
<select class="form-control custom-select col-12" required >
        <option *ngFor="let myQuest of QuestionModel;"  [value]="myQuest.QuestionID"> {{myQuest.SecurityQuestion}} </option>
</select>

<input type="text" [(ngModel)]="QuestionModel[i]['SecurityAns']" [ngModelOptions]="{standalone: true}"   />
</div>
</ng-template>

我正在使用双向绑定。问题是我无法确定哪个答案属于哪个问题。以下是我必须更新所选答案的模型。

{QuestionID: "0", SecurityQuestion: "What city were you born in?", SecurityAns: null}
{QuestionID: "1", SecurityQuestion: "What is the name of your best friend?", SecurityAns: null}
{QuestionID: "2", SecurityQuestion: "What is the name of your pet?", SecurityAns: null}

Answer 1

尝试在select元素上放置一个ngModel：

<select [(ngModel)]="selectedValue">

Answer 2

将其添加到select元素：<select (change)="onQuestionChange($event)" >在ts文件中创建onQuestionChange()方法。 event参数将保存已绑定到value元素的<option>属性的属性。

然后你可以从你的QuestionModel得到与此相关的问题

Answer 3

最后，我找到了解决问题的方法。我的更新代码如下：

 <ng-template let-i="index" let-c="count" ngFor let-question [ngForOf]="QuestionModel_ddl">
                        <div class="row">
                            <div class="col-md-2">
                                <label for="SecurityQuestion">Security Question {{i+1}} :</label>
                            </div>
                            <div class="col-md-6">
                                <select class="form-control custom-select col-12" (change)="UpdateModelDtls($event, i)" required>
                                    <option value=""></option>
                                    <option *ngFor="let myQuest of QuestionModel_ddl;" [value]="myQuest.QuestionID"> {{myQuest.SecurityQuestion}} </option>
                                </select>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-2">
                                <label for="SecurityQuestion">Security Answer :</label>
                            </div>
                            <div class="col-md-6">
                                <input type="text" [(ngModel)]="QuestionModel_ddl[i]['SecurityAns']" required (focusout)="UpdateSeqAnswer($event, i)" [ngModelOptions]="{standalone: true}" />
                            </div>
                        </div>

                    </ng-template>

我添加了两个方法UpdateModelDtls和UpdateSeqAnswer。在Component中，将其定义为

UpdateModelDtls($event: any, i: any) {
        debugger;

        var item = this.selectedDtls.find(x => x.Index == i);
        /* Check if item already present in selectedDtls array. If present, show msg as 'This question is already selected, please select a different question.'  */
        var IsPresent = this.selectedDtls.find(x => x.QID == this.QuestionModel_ddl[($event.target.selectedIndex - 1)]['QuestionID'] && x.Index != i);

        /* In case all the questions dropdowns are selected */
        if (item) {
            /* Remove the changed dropdown from selectedDtls array since we are making it as not-selected */

            var index = this.selectedDtls.indexOf(item);
            if (index > -1) {
                this.selectedDtls.splice(index, 1);
            }
        }
        
        if (IsPresent) {
            this.IsDuplicateQuestion = true;
            $event.target.selectedIndex = -1;
        }
        else {

            this.IsDuplicateQuestion = false;
            let item = {
                QID: this.QuestionModel_ddl[($event.target.selectedIndex - 1)]['QuestionID'],
                Index: i,
                SeqAns: this.QuestionModel_ddl[i]['SecurityAns']
            };
            this.selectedDtls.push(item);
        }
    }

    UpdateSeqAnswer($event: any, i: any) {
        debugger;
        var item = this.selectedDtls.find(x => x.Index == i);
        if (item)
            item.SeqAns = $event.target.value;
    }

export class SelectedDtls {
    QID: string;
    Index: number;
    SeqAns: string;
}

这两种方法有助于使用所选值更新临时数组（SelectedDtls）。