Angular 2, ustaw domyślną wartość, aby wybrać opcję

Question

Próbuję dodać wartość domyślną do opcji. Będzie to jak rodzaj elementu zastępczego i używam do tego celu this method. W czystym HTML-ie działa, ale jeśli spróbuję użyć atrybutu kątowego 2, *ngFor, nic nie wybierze.

Oto mój kod, który używam w czystym HTML:

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

i korzystania kątowa szablonu:

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

klasa jest

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

Chcę Select Language być wybrana wartość domyślna. Jest wyłączony, ale nie wybrany.

Jak wybrać ją jako wartość domyślną?

Live example

Answer 1

aktualizacja

4.0.0-beta.6 dodany 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; 
} 

ten sposób instancja przypisana selectedCountries nie musi być identyczny obiekt, ale zwyczaj funkcji porównującej można przekazać, na przykład, aby móc dopasować różnicę erent instancji obiektu z identycznymi wartościami właściwości.

oryginalny

Jeśli chcesz użyć obiektu jako wartości trzeba użyć [ngValue] na elemencie opcji.

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

Kiedy selectLanguage ma wartość opcji przypisany [(ngModel)]="..." będzie to jeden zrobić jeden wybrany domyślnie:

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

Answer 2

Spróbuj poniżej przykładowy kod dla tego:
Wymień yourValue ze niezależnie od wartości chcesz wybrać domyślnie

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

Answer 3

Uważam, że lepiej jest usunąć domyślną opcję z tablicy selectOption i osobno określa domyślną opcję niewybaczalną.

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