以角度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

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

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

Answer 2

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

然后你可以从你的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) 使用所选值进行更新。