Angolare 2, impostare il valore predefinito per selezionare l’opzione

Provo ad aggiungere un valore predefinito a un’opzione. Sarà come una sorta di segnaposto e io uso questo metodo per farlo. In puro HTML funziona, ma se provo a usare l’ *ngFor di *ngFor 2, non seleziona nulla.

Ecco il mio codice che uso in puro HTML:

   Select Language HTML PHP Javascript  

E usando il modello angular:

   {{item.label}}  

La class è

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

Voglio Select Language da selezionare come valore predefinito. È disabilitato ma non selezionato.

    Come posso selezionarlo come valore predefinito?

    Esempio dal vivo

    aggiornare

    4.0.0-beta.6 aggiunto compareWith

      compareFn(c1: Country, c2: Country): boolean { return c1 && c2 ? c1.id === c2.id : c1 === c2; } 

    in questo modo l’istanza assegnata a selectedCountries non deve necessariamente essere l’object identico, ma può essere passata una funzione di confronto personalizzata, ad esempio per poter abbinare un’istanza di object diversa con valori di proprietà identici.

    originale

    Se si desidera utilizzare un object come valore, è necessario utilizzare [ngValue] sull’elemento opzione.

       

    Quando selectLanguage ha un valore di opzioni assegnato [(ngModel)]="..." questo renderà quello selezionato per default:

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

    Trovo più bello rimuovere l’opzione predefinita dall’array selectOption e specificare separatamente l’opzione di default non selezionabile.

      

    Prova di seguito il codice di esempio per questo:
    Sostituisci il yourValue valore con qualunque valore desideri selezionare come predefinito