Angular 6 - 表单 - Select 选项未正确更新

Question

有人能告诉我，为什么 select 选项没有正确更新。但是无论我做了什么改变，控制台都得到了正确的值。

具有 select 选项和保存按钮的表单。每当我更改时，它都会在我看来显示 [0][0] - [0][0]。请 complete code is here

form name="form" (ngSubmit)="onSubmit()" #f="ngForm" novalidate>
    <div class="form-group" contenteditable="false" *ngFor="let val of mockData">
        <p>{{val.description}}</p>
        <label for="sort" class="col-sm-2 control-label"> select current type </label>
        <div class="col-sm-4">
            <select [(ngModel)]="saveData.selectedValue1" (change)="currChanged()" name="selectedValue1" >
                <option *ngFor='let d of dropDownString' [value]="d.currencyType">
{{d.currencyType}}
</option>
            </select>
        </div>
        <label for="sort" class="col-sm-2 control-label"> select max rate </label>
        <div class="col-sm-4">
            <select [(ngModel)]="saveData.selectedValue2" (change)="rateChanged()" name="selectedValue2" #selectedValue2 = "ngModel">
                <option *ngFor='let c of currencyValue' [value]="c.maxRate">
{{c.maxRate}}
</option>
            </select>
        </div>
    </div>
    <button>Save</button>
</form>

请问哪里出了问题，需要改什么。

注意：我只想单独保存 select 选项值，并且应该在没有任何更改的情况下从获取响应中进行描述。目前我正在使用一些硬编码数据。

提前致谢

Answer 1

在您的 replace 函数中，您需要将占位符替换为 this.saveData.selectedValue1 或 this.saveData.selectedValue2。 this.saveData 通过 ngModel.

绑定到两个 select 元素的值

示例：

data.description = data.description.replace(this.prevSelectValue1, this.saveData.selectedValue1);

您还需要相应地更新之前选择的值：

this.prevSelectValue1 = this.saveData.selectedValue1;

Stackblitz here.

Angular 6 - 表单 - Select 选项未正确更新

Angular 6 - Form - Select Option not updating properly

javascript

typescript

angular-ngmodel

angular