我有一个产品有一个类别,在编辑产品时我想在下拉列表中显示当前类别。如果用户想在下拉列表中更改类别,那没问题,但在加载时我想显示所选的当前产品的值(value)。
这是我的html
<div class="form-group">
<label class="control-label dash-control-label col-xs-3">Products category:</label>
<div class="col-xs-9">
<select id="mainGroupSelectEdit" class="form-control dash-form-control select2" style="width: 100%;"
data-minimum-results-for-search="Infinity" name="mainGroupSelectEdit" required (change)="filterSubById(article.groupId)" [(ngModel)]="article.groupId">
<option [value]="helperService.IsItEmptyGuid()" [selected]="isDefaultSelected()">-/-</option>
<option [value]="group.id" *ngFor="let group of mainGroups" [selected]="group.id==='a0e25215-a60e-4444-b6ac-4521b7de4b37'">{{group.title}}</option>
</select>
{{article.mainGroup.id}}
</div>
</div>
当我运行我的应用程序并打开此表单时,如您所见,我输入了 {{article.mainGroup.id}}
<- 它是用来检查是否有类别 ID 的绑定(bind)文章,当我打开表单时它看起来像这样:
如此不经意{{article.mainGroup.id}}
拥有一个值(value),但我不能强制<select>
将该值显示为选中...
任何帮助都会很棒,非常感谢!
编辑: 它什么都不做,只是选择 -/- 如果产品没有组,因为那时 article.mainGroup.id 将是空 guid..
isDefaultSelected() {
return this._globalHelperService.isEmptyGuid(this.article.mainGroup.id);
}
编辑 2:按照 Pranay Rana 示例,这是我所做的:
1.) 选择文章 2.) 打开模态 3.) 打开模式时的图像:
如您所见,值是存在的,但在模式中未选择任何内容。 这是原始代码,不仅是 img:
<div class="form-group">
<label class="control-label dash-control-label col-xs-3">Group:</label>
<div class="col-xs-9">
<select touch-enter-directive [ref]="ref" [nextFocusElement]="articleSubGroup" id="mainGroupSelectEdit" class="form-control dash-form-control select2" style="width: 100%;"
data-minimum-results-for-search="Infinity" name="mainGroupSelectEdit" required (change)="filterSubById(article.groupId)" [(ngModel)]="article.mainGroup.id">
<option [ngValue]="null">-/-</option>
<option [ngValue]="group.id" *ngFor="let group of mainGroups">{{group.title}}</option>
</select>
{{article.mainGroup.id}}
</div>
</div>
可能 select2 出了问题?
谢谢
最佳答案
这样做
<select id="mainGroupSelectEdit" class="form-control dash-form-control select2" style="width: 100%;"
data-minimum-results-for-search="Infinity" name="mainGroupSelectEdit" required (change)="filterSubById(article.groupId)" [(ngModel)]="article.groupId">
<option [ngValue]="null" >-/-</option>
<option [ngValue]="group.id" *ngFor="let group of mainGroups">{{group.title}}</option>
</select>
在 Angular 中不需要 [select]
它将根据您作为 [(ngModel)] 传递给选择元素的 id 值选择选项
,也不需要 emptyguid
如果您的值为 null
那么将选择默认选项
关于javascript - 如何根据对象属性值在下拉列表中选择值 - 选择和 Angular ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50826538/