选择的默认选项未显示

Question

我有一个选择，我需要放置一个默认选择选项，但它没有显示在我的模板中。

我试过：

<div class="select">

    <select (change)="calculaMes(mesEscolhido)" [(ngModel)]="mesEscolhido" name="selectMesEscolhido"
    class="select-text">
       <option class="dropdown-item" disabled selected value>Teste</option>
       <option [hidden]="datasComMovimentacoes[x].data == mesEscolhido" *ngFor="let mes of datasComMovimentacoes;let x = index"
       class="dropdown-item">{{mes.data}}</option>
    </select>

   <span class="select-highlight"></span>
   <span class="select-bar"></span>

</div>

我不相信这是由我的 css 引起的，但是，这是我的 css：

 .select {
    font-family:
      'Roboto','Helvetica','Arial',sans-serif;
      position: relative;
      width: 100%;
      margin-top: 5%;
      font-size: 18px;
      color: #757575!important;
  }

  .select-text {
      margin-top: 10%;
      position: relative;
      font-family: inherit;
      background-color: transparent;
      color: #757575!important;
      width: 100%;
      font-size: 18px;
      border-radius: 0;
      border: none;
      border-bottom: 1px solid rgba(0,0,0, 0.12);
  }

  /* Remove focus */
  .select-text:focus {
      outline: none;
      color: #757575!important;
      border-bottom: 1px solid rgba(0,0,0, 0);
  }

      /* Use custom arrow */
  .select .select-text {
      appearance: none;
      color: #757575!important;
      -webkit-appearance:none
  }

这是我在模板中的结果：

Answer 1

如果value选项标签的属性设置为selectedOption组件上属性的默认值，则将选择默认选项。假设您没有初始化该selectedOption属性，那么默认情况下它的值为undefined. 所以，标签的这个value属性option应该是undefined这种情况。

...
<option class="dropdown-item" disabled selected value="undefined">Select an Option</option>
...

这是供您参考的示例 StackBlitz。