我有一个表单,我正在为其动态创建添加按钮上的选择下拉列表。以下是我的 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 标签。所以选择标签显示一些其他字符串,但根据下拉列表中的选择绑定到正确的值。
我尝试用 替换选项标签中的值[value]
,[ngValue]
但同样的问题仍然存在。
请建议我哪里出错了。
我假设这是一种形式。对于表单,name
属性需要是唯一的,以便字段被评估为单独的字段而不是一个和相同的字段。所以如果这是一个表单,你的表单值目前看起来像
{
"eventStatus": 1,
}
不管你有多少个字段,它们都指向同一个字段。而正如您注意到的,您的数组具有正确的值。这只会影响表格。您可以通过给 select 一个 unique 来解决这个问题name
,这可以使用索引来实现,因此将您的 select 更改为:
<div *ngFor="let event of tmpWeeklyEvent; let index=index">
<select [(ngModel)]="event.enumvalue" name="eventStatus{{index}}">
<!-- ... -->
这应该可以解决您的问题。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句