[英]How to Preselect value using Datalist Dropdown in Angular?
I have an editable dropdown in which I need to autopopulate its default value from a template.我有一个可编辑的下拉列表,我需要从模板中自动填充其默认值。 The default value is fetched from "this.Model.Application.environment" that has "dev" as a value.默认值取自“this.Model.Application.environment”,其值为“dev”。 The below code gives me a editable dropdown but I need to preselect the value from the template.下面的代码给了我一个可编辑的下拉列表,但我需要从模板中预先选择值。 The [(ngModel)]="this.Model.Application.environment" in is showing the default value("dev") on the page, but it does not show the other drop down values("qa/prod) and also its not editable. so I removed ngModel from tag. Please help me how to crack it. The requirement is 1.editable dropdown, 2.preselect the value, 3.show other values in the dropdown. (1 & 3 is working now) [(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>
You have to use [(ngModel)]
only with input
elements.您必须仅将[(ngModel)]
用于input
元素。 In your example it used with datalist
- that's wrong.在您的示例中,它与datalist
一起使用-这是错误的。
Simple working example:简单的工作示例:
<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.