Açısal 2,

Question

seçeneğini seçmek için varsayılan değeri ayarlayın. Bir seçeneğe varsayılan değer eklemeye çalışıyorum. Bir çeşit yer tutucu gibi olacak ve bunu yapmak için this method kullanıyorum. Saf HTML'de çalışır, ancak *ngFor açısal 2 özelliğini kullanmaya çalışırsam, hiçbir şey seçmez.

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

Ve Açısal şablonu kullanarak: Ben Select Language istiyorum

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

sınıf

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

olarak seçilecek saf HTML kullanmak Burada

kodum varsayılan değer. Bu devre dışı, ancak seçilmedi.

Bunu varsayılan değer olarak nasıl seçebilirim?

Live example

Answer 1

güncelleme

4.0.0-beta.6selectedCountries tahsis örneği aynı nesne olması gerekmez, bu şekilde, ancak özel bir karşılaştırma işlevi

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

compareWith eklendi örneğin bir farkın eşleştirilebilmesi için geçirilebilir özdeş özellik değerleri ile hatalı nesne örneği.

Eğer seçenek elemana [ngValue] kullanmak gerekir değeri olarak bir nesneyi kullanmak istiyorsanız orijinal

.

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

Bunun örnek kod aşağıda deneyin: selectLanguage bu bir varsayılan olarak seçilir bir hale getirecek [(ngModel)]="..." atanan bir seçenek değere sahip olduğunda

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

seçmek istediğiniz ne değeri yourValue değiştirin varsayılan

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

Answer 3

Varsayılan seçeneği kaldırmak daha güzel buluyorum selectOption dizisinden ve varsayılan unselectable seçeneği ayrı ayrı belirtme.

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