html - 选择的默认选项未显示

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

我试过了：

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

这是我在模板中的结果：

最佳答案

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

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

这是供您参考的Sample StackBlitz。

关于html - 选择的默认选项未显示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52860383/