[英]How to Preselect value using Datalist Dropdown in Angular?
我有一个可编辑的下拉列表,我需要从模板中自动填充其默认值。 默认值取自“this.Model.Application.environment”,其值为“dev”。 下面的代码给了我一个可编辑的下拉列表,但我需要从模板中预先选择值。 [(ngModel)]="this.Model.Application.environment" 在页面上显示默认值(“dev”),但它不显示其他下拉值(“qa/prod)及其不可编辑。所以我从标签中删除了 ngModel。请帮助我如何破解它。要求是 1.editable 下拉列表,2.预选值,3.在下拉列表中显示其他值。(现在 1 和 3 正在工作)
<div class="select-editable">
<input list="envVal" id="environment" name="environment" #select class="form-control" placeholder="Select Base Image Version" size="medium" style="width:326px; padding-top:5px;max-width: 100%;" (change)='updatebaseimageversion($event)' />
<datalist id="envVal" [(ngModel)]="this.fmGeneratorModel.Application.environment">
<ng-container *ngFor="let env of environmentList">
<option [ngValue]="env" [selected]="env === 'dev'" >{{env}}</option>
</ng-container>
</datalist>
</div>
您必须仅将[(ngModel)]
用于input
元素。 在您的示例中,它与datalist
一起使用-这是错误的。
简单的工作示例:
<label for="browser">Choose your browser from the list:</label>
<input list="browsers" name="browser" [(ngModel)]="model" #browser>
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
...
</datalist>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.