选择的默认选项未显示

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

这是您推荐的Sample StackBlitz。

Answer 2

对谁感兴趣，这不会显示，因为我的* nyif。我被[隐藏]更改了，现在我有了预期的选定标签。我不知道为什么