选择的默认选项未显示答案

【问题标题】：Default option of select is not showing选择的默认选项未显示
【发布时间】：2019-03-22 10:59:21
【问题描述】：

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

我试过了：

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

这是我在模板中的结果：

【问题讨论】：

当前和预期的输出是什么？
当前是我在这个问题中发布的图像。预期是“Teste”

标签： html css angular

【解决方案1】：

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

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

这里有一个Sample StackBlitz 供您参考。

【讨论】：

【解决方案2】：

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

【讨论】：

[hidden] 和 *ngIf 之间有区别。 [hidden] 元素将始终出现在您的 dom 上，只是不可见，而如果您使用 *ngIf，则该元素仅在条件为真时才占用 DOM！