angular - 如何使用 Angular 4 将占位符放在选择下拉列表中？

Question

我是 Angular 4 的新手，我正在尝试使用框架本身在下拉列表中放置一个占位符，但它不起作用。
这是我的代码，以便您更好地理解：

<select class="form-control" id="ccmonth"                                             
 [(ngModel)]="expenseFilter" (change)="dateFilter(expenseFilter)">

  <option [ngValue]="null" disabled selected>Select Period</option>
  <option [ngValue]="1"> Today </option>
  <option [ngValue]="2">Week</option>
  <option [ngValue]="3">Monthly</option>
  <option [ngValue]="4">Quarter</option>
  <option [ngValue]="5">Year</option>
</select>

标签： angular

Answer 1

这是工作示例，

html文件，

<select class="form-control" id="ccmonth" [(ngModel)]="expenseFilter" (change)="dateFilter(expenseFilter)">
  <!-- Here iam Added one line -->
  <option [ngValue]="undefined" disabled selected>Choose Filter</option>

  <option [ngValue]="1"> Today </option>
  <option [ngValue]="2">Week</option>
  <option [ngValue]="3">Monthly</option>
  <option [ngValue]="4">Quarter</option>
  <option [ngValue]="5">Year</option>

</select>

这是演示网址，

https://stackblitz.com/edit/angular-muthutest-vjddiq

输出截图，

我希望它能解决你的问题。

谢谢，穆图库马尔