在角度 2 中选择选项在选择选项时未显示正确的值

Question

我有一个表单，我在添加按钮上动态创建一个选择下拉菜单。以下是我的html代码sn-p：

<div *ngFor="let event of tmpWeeklyEvent;let index=index" class="col-xs-12 padding-left-right-0 clearfix">
    <select title="Select Country" class="form-control margin-top-5" [disabled]="scheduleStatus==null || scheduleStatus==undefined" [(ngModel)]="event.enumvalue" name="eventStatus">
        <option *ngFor="let item of scheduleStatus" value="{{item.EnumId}}">{{item.EnumString}}
        </option>
    </select>
</div>
<button type="button" class="btn btn-primary" (click)="increaseWeeklyEvent()">Add New Event</button>

IncreaseWeeklyEvent() 只是将另一个事件添加到列表中：

increaseWeeklyEvent() {
    this.createWeekEvent();
}

createWeekEvent() {
        var newEvent = new TimeSchedule();
        var arrNewEvent = new Array<TimeSchedule>();

        if (this.scheduleStatus != null && this.scheduleStatus != undefined && this.scheduleStatus.length > 0)
        {
            newEvent.Time = "08:00";
            newEvent.enumvalue = this.scheduleStatus[0].EnumId;
            newEvent.Status = this.scheduleStatus[0].EnumString;

            this.tmpWeeklyEvent.push(newEvent);
        }
        else
        {
            this.toastr.error("No data found for Schedule Status Dropdown. Add/Edit will not work");
        }
    }

我的问题是，一旦我点击添加按钮，之前下拉列表中的更改值就会恢复为默认值。但是在模型上，更改的值被保留，甚至在 HTML 上，我可以看到正确的值绑定到选择标记。因此，选择标签会显示其他一些字符串，但会根据下拉列表中的选择绑定到正确的值。

我尝试用[value] 和[ngValue] 替换选项标签中的值，但同样的问题仍然存在。

请建议我哪里出错了。

Answer 1

我假设这是一个表格。对于表单，name 属性需要是唯一的，以便字段被评估为单独的字段，而不是一个相同的字段。因此，如果这是一个表单，您的表单值当前看起来像

{
  "eventStatus": 1,
}

无论你有多少个字段，它们都指向同一个字段。而您注意到您的数组具有正确的值。这只会影响表单。您可以通过给选择一个唯一的name 来解决这个问题，这可以使用索引来实现，因此将您的选择更改为：

<div *ngFor="let event of tmpWeeklyEvent; let index=index">
  <select  [(ngModel)]="event.enumvalue" name="eventStatus{{index}}">
  <!-- ... -->

这应该可以解决您的问题。