Standardwert der Dropdown-Box nicht in Angular 2 angezeigt

Question

Ich versuche, "Wählen Sie eine Farbe" als Standardwert in meiner Dropdown-Box anzuzeigen. Nach der Auswahl der Farbe möchte ich diese Option nicht verfügbar sein.

Unten ist der Code ich verwende:

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

Ohne einschließlich ngModel das funktioniert gut. Wenn ich ngModel einschließe, wird in der Dropdown-Box kein Standardtext angezeigt.

Answer 1

Das ist, weil das Modell selectedColor leer ist, und eckig wählen Sie die Option im ngModel ausgewählt, in Ihrem Fall ist undefined, und Winkel suchen diesen Wert und es nichts gefunden.

Sie sollten der Standardoption einen Standardwert zuweisen und diesen Wert dem Modell zuweisen.

So:

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

können Sie scheinen es in dieser Plunker, genießen.