如何使用 Angular 中的数据列表下拉列表预选值?
How to Preselect value using Datalist Dropdown in Angular?
我有一个可编辑的下拉菜单,我需要从模板中自动填充其默认值。
默认值取自以“dev”为值的“this.Model.Application.environment”。下面的代码给了我一个可编辑的下拉列表,但我需要从模板中预选值。 [(ngModel)]="this.Model.Application.environment" 在页面上显示默认值 ("dev"),但不显示其他下拉值 ("qa/prod) 及其不可编辑。所以我从标签中删除了 ngModel。请帮助我如何破解它。
要求是
1.editable 下拉菜单,
2.preselect 值,
3.show 下拉列表中的其他值。 (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>
我有一个可编辑的下拉菜单,我需要从模板中自动填充其默认值。 默认值取自以“dev”为值的“this.Model.Application.environment”。下面的代码给了我一个可编辑的下拉列表,但我需要从模板中预选值。 [(ngModel)]="this.Model.Application.environment" 在页面上显示默认值 ("dev"),但不显示其他下拉值 ("qa/prod) 及其不可编辑。所以我从标签中删除了 ngModel。请帮助我如何破解它。 要求是 1.editable 下拉菜单, 2.preselect 值, 3.show 下拉列表中的其他值。 (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>