选择的默认选项未显示 [英] Default option of select is not showing

问题描述

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

I have one select that i need to put a default select option, but it's not showing in my template.

我尝试过:

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

I don't believe this is caused by my css, but, this is my 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
  }

这是我在模板中得到的结果:

This is my result in template:

推荐答案

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

The default option will be selected if the value attribute of the option tag is set to the default value of the selectedOption property on your Component. Let's say you didn't initialize the selectedOption property, then by default it's value will be undefined. And so, this value attribute of the option tag should be undefined in that case.

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

这是一个示例StackBlitz 供您参考.

Here's a Sample StackBlitz for your ref.

这篇关于选择的默认选项未显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！