时间戳

首页 > 解决方案 > 如何自动显示数据列表的下拉列表？

angular - 如何自动显示数据列表的下拉列表？

问题描述

在这种情况下，当数据被获取并填充到datalist?

<input class="header-filter-search" (change)='onTaxpayerChosen($event)' [(ngModel)]="searchValue" placeholder=" Search accounts" type="text" (blur)="searchForUser()" [formControl]="query" list="accounts" id="account"/>
          <datalist id="accounts">
              <option *ngFor="let account of taxpayerList">{{account.name}}</option>
          </datalist>

填写选项后，我目前必须选择一个小箭头来显示下拉列表，但我无法在网上找到任何可用于自动显示这种格式的下拉列表的内容？

标签： angular

解决方案

使用*ngIf="taxpayerList"声明。这意味着您dataList将不会被渲染，直到taxpayerList不会被填充： 

 <datalist id="productList">
   <select *ngIf="taxpayerList">
    <option *ngFor="let account of taxpayerList">
        {{account.name}} 
    </option>
   </select>
 </datalist>

更新：

<p>Debug info: taxpayerList {{ taxpayerList | json }}</p>
<select>
    <option *ngFor="let account of taxpayerList" [value]="account.name"></option>
</select>

推荐阅读