Значение по умолчанию раскрывающегося списка не отображается в Angular 2

Question

Я пытаюсь отобразить "Выберите цвет" в качестве значения по умолчанию в раскрывающемся списке. После выбора цвета я хочу, чтобы эта опция не была доступна.

Ниже приведен код, который я использую:

<select class="color-filter" [(ngModel)] = "selectedColor">
     <option disabled selected value class="hideoption">Select a Color</option>
     <option *ngFor="let c of color | mapToIterable" [value]="c.key">{{c.val}}</option>
</select>

CSS:

 .hideoption { display:none; visibility:hidden; height:0; font-size:0; }

Без включения ngModel это работает нормально. Однако, когда я включаю ngModel, он не показывает текст по умолчанию в моем выпадающем списке.

Answer 1

Это потому, что модель selectedColor пусто, и угловой выберите опцию, выбранную в ngModel, в вашем случае это undefinedи угловой поиск этого значения, и он ничего не нашел.

Вы должны установить значение по умолчанию для параметра по умолчанию и установить это значение для модели.

Как это:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <select class="color-filter" [(ngModel)] = "selectedColor">
     <option disabled value="0" class="hideoption">Select a Color</option>
     <option *ngFor="let c of color" [value]="c">{{c}}</option>
</select>  
  `,
  styles: [`
  .hideoption { display:none; visibility:hidden; height:0; font-size:0; }
  `]
})
export class AppComponent {
  selectedColor:any = 0;
  color;

  constructor(){
    this.color = [
      "red","blue"
    ]
  }
}

Вы можете показаться в этом Plunker, наслаждайтесь.