Angular 2, configura el valor pnetworkingeterminado para seleccionar la opción

Intento agregar un valor pnetworkingeterminado a una opción. Será como un tipo de marcador de position y uso este método para hacerlo. En HTML puro funciona, pero si trato de usar el *ngFor angular 2, no selecciona nada.

Aquí mi código que uso en HTML puro:

  <select name="select-html" id="select-html"> <option value="0" selected disabled>Select Language</option> <option value="1">HTML</option> <option value="2">PHP</option> <option value="3">Javascript</option> </select> 

Y usando la plantilla angular:

  <select name="select" id="select" [(ngModel)]="selectLanguage"> <option *ngFor="let item of selectOption" [selected]="item.value==0" [disabled]="item.value==0">{{item.label}}</option> </select> 

La class es

 import {Component} from '@angular/core'; @Component({ moduleId: module.id, selector: 'app-form-select', templateUrl: 'default.component.html' }) export class DefaultComponent { private selectOption: any; constructor() { this.selectOption = [ { id: 1, label: "Select Language", value: 0 }, { id: 2, label: "HTML 5", value: 1 }, { id: 3, label: "PHP", value: 2 }, { id: 4, label: "Javascript", value: 3 } ] } } 

Deseo Select Language como valor pnetworkingeterminado. Está deshabilitado pero no seleccionado.

¿Cómo puedo seleccionarlo como valor pnetworkingeterminado?

Ejemplo en vivo

actualizar

4.0.0-beta.6 agregó la compareWith

 <select [compareWith]="compareFn" [(ngModel)]="selectedCountries"> <option *ngFor="let country of countries" [ngValue]="country"> {{country.name}} </option> </select> compareFn(c1: Country, c2: Country): boolean { return c1 && c2 ? c1.id === c2.id : c1 === c2; } 

de esta forma, la instancia asignada a selectedCountries no necesita ser el object idéntico, pero se puede pasar una function de comparación personalizada, por ejemplo, para poder hacer coincidir una instancia de object diferente con valores de propiedad idénticos.

original

Si desea usar un object como valor, debe usar [ngValue] en el elemento de opción.

  <select name="select" id="select" [(ngModel)]="selectLanguage"> <option *ngFor="let item of selectOption" [ngValue]="item" [disabled]="item.value==0">{{item.label}}</option> </select> 

Cuando selectLanguage tiene un valor de opciones asignado [(ngModel)]="..." , este seleccionará el seleccionado por defecto:

 import {Component} from '@angular/core'; @Component({ moduleId: module.id, selector: 'app-form-select', templateUrl: 'default.component.html' }) export class DefaultComponent { private selectOption: any; constructor() { this.selectOption = [ { id: 1, label: "Select Language", value: 0 }, { id: 2, label: "HTML 5", value: 1 }, { id: 3, label: "PHP", value: 2 }, { id: 4, label: "Javascript", value: 3 } ]; this.selectLanguage = this.selectOption[0]; } } 

Pruebe a continuación el código de muestra para esto:
Reemplace su yourValue con el valor que desee para seleccionar el valor pnetworkingeterminado

 <select placeholder="country" > <option *ngFor="let country of countriesList" [ngValue]="country" [selected]="country.country_name == yourValue" > {{country.country_name}} </option> </select> 

Me parece más selectOption eliminar la opción pnetworkingeterminada de la matriz selectOption y especificar la opción pnetworkingeterminada no seleccionable por separado.

 <select name="select" id="select" [(ngModel)]="selectLanguage"> <option [ngValue]="undefined" disabled>Select Language</option> <option *ngFor="let item of selectOption" [value]="item.value" > item.label </option> </select>