使用 ngModel 时无法在下拉菜单中集成占位符

Question

我有一个使用 *ngFor 循环的下拉菜单，所有选项都是数据绑定的。我试图在选择一个选项之前放入一个占位符，如果我使用第一组代码，占位符会完美显示，但是当我包含 [(ngModel)]（我需要）时，占位符会消失。

注意：ngModel 绑定到下拉列表的索引，因此我可以使用它来过滤 JSON 文件，这就是为什么我还有一个索引运行。

我试过使用 'placeholder' 和 'required placeholder' 并在 for 循环选项

之前添加一个初始选项

HTML 带有工作占位符但没有 ngModel 的代码

  <label for="filter-coach-sel">Option</label>
    <select required placeholder=""  class="form-control" id="filter-coach-sel"  >   
        <option hidden value="" disabled selected>Select an option </option>         
      <option *ngFor = " let coach of navHistory;">{{coach.account.name}}</option>                   
  </select>

HTML 使用 ngModel 但占位符不再有效的代码

            <div class="form-group">    
              <label for="filter-coach-sel">Coach</label>
                <select required placeholder="" [(ngModel)]="selectedCoachIndex" (change) = "changeCoach()" class="form-control" id="filter-coach-sel"  >   
                   <option   disabled selected>Select one category </option>         
                  <option *ngFor = " let coach of navHistory; let i = index"  value="{{i}}"> {{coach.account.first_name}}</option>                   
             </select>
            </div>

Answer 1

由于您使用 ngModel 绑定 select 框，因此您的占位符选项也需要是值之一。尝试初始化为 selectedCoachIndex=""; 为您的 option

分配 value=""

<div class="form-group">
    <label for="filter-coach-sel">Coach</label>
  <select [(ngModel)]="selectedCoachIndex" class="form-control"  >   
    <option disabled selected value="">Select one category </option>        
    <option *ngFor = " let coach of navHistory; let i = index"  value="{{i}}"> {{coach.first_name}}</option>                   
  </select>
</div>

而您的 .ts 文件将包含这样的内容

navHistory = [{
    first_name: 'Bob'
  },{
    first_name: 'Jon'
  },{
    first_name: 'Mat'
  }];
selectedCoachIndex = "";

Stackblitz Demo

使用 ngModel 时无法在下拉菜单中集成占位符

Cannot integrate a place holder in a dropdown menu when using ngModel

html

placeholder

ngfor

ngmodel

angular6