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

Question

我有一个使用 *ngFor 循环的下拉菜单，所有选项都是数据绑定的。我正在尝试放置一个占位符，直到选择一个选项，如果我使用第一组代码，占位符看起来很完美，但是当我包含 [(ngModel(](我需要(时，占位符消失了。

注意：ngModel 绑定到下拉列表的索引，因此我可以使用它来过滤 JSON 文件，这就是我也运行索引的原因。

我尝试使用"占位符"和"必需占位符"，并在 for 循环选项之前添加一个初始选项

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

  <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>

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

            <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来绑定选择框，因此占位符选项也需要是值之一。尝试初始化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 = "";

堆栈闪电战演示