Question

我有一个表单，我正在动态创建一个添加按钮的选择下拉列表。以下是我的html代码段：

<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上，我可以看到正确的值绑定到select标记。因此，select tag会显示其他一些字符串，但会根据下拉列表中的选项绑定到正确的值。

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

请说明我哪里出错了。

Answer 1

我认为这是一个表格。对于表单，name属性必须是唯一的，以便将字段评估为单独的字段而不是同一个字段。因此，如果这是一个表单，您的表单值看起来就像

{
  "eventStatus": 1,
}

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

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

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

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

1 个答案: