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

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。因此，在这种情况下，option 标记的这个 value 属性应该是 undefined。

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

这是一个 Sample StackBlitz供您引用。