如何在 Angular 中使用 Datalist Dropdown 预选值？

Posted 2023-03-05

【中文标题】如何在 Angular 中使用 Datalist Dropdown 预选值？

【英文标题】：How to Preselect value using Datalist Dropdown in Angular?

【发布时间】：2022-01-22 22:03:53

【问题描述】：

我有一个可编辑的下拉列表，我需要从模板中自动填充其默认值。 默认值是从以“dev”为值的“this.Model.Application.environment”中获取的。下面的代码给了我一个可编辑的下拉列表，但我需要从模板中预先选择值。 [(ngModel)]="this.Model.Application.environment" 在页面上显示默认值（“dev”），但不显示其他下拉值（“qa/prod）及其不可编辑。所以我从标签中删除了 ngModel。请帮助我如何破解它。 要求是 1.可编辑的下拉菜单， 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>

【参考方案1】：

您只能将[(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>

【讨论】：

感谢您的回复@Tony Marko。我在输入元素中给出了 [(ngModel)]。但现在正在设置默认值。但下拉菜单不起作用。

控制台有错误吗？因为它应该工作。 stackblitz 上的简单工作示例here

我没有收到任何错误。我只得到一个输出，要么是我使用 ngmodel 时的默认值，要么是下拉值。两个我都没有得到

即使输入是干净的，你也别无选择？你能在 stackblitz 上做例子吗？

嗨@Tony，这是我的测试错误。我在测试时没有删除文本框中的值。感谢您的支持