web-dev-qa-db-fra.com

Angular 2, définissez la valeur par défaut pour sélectionner l'option

J'essaie d'ajouter une valeur par défaut à une option. Ce sera comme une sorte d'espace réservé et j'utilise cette méthode pour le faire. En HTML pur, cela fonctionne, mais si j'essaie d'utiliser *ngFor de angular 2, il ne sélectionne rien.

Voici mon code que j'utilise en HTML pur:

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

Et en utilisant 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 classe est

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

Je voudrais Select Languageà sélectionner comme valeur par défaut. Il est désactivé mais non sélectionné.

Comment puis-je le sélectionner comme valeur par défaut?

exemple en direct

javascriptangularangular2-forms
14
Radonirina Maminiaina

mise à jour

4.0.0-beta.6 ajouté 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 cette façon, l'instance affectée à selectedCountries n'a pas besoin d'être l'objet identique, mais une fonction de comparaison personnalisée peut être transmise, par exemple pour pouvoir faire correspondre une instance d'objet différente avec des valeurs de propriété identiques.

original

Si vous souhaitez utiliser un objet comme valeur, vous devez utiliser [ngValue] Sur l'élément d'option.

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

Lorsque selectLanguage a une valeur d'options assignée [(ngModel)]="..." celle-ci fera celle sélectionnée par défaut:

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];
  }
}
22
Günter Zöchbauer

Je trouve plus agréable de supprimer l'option par défaut du tableau selectOption et de spécifier séparément l'option non sélectionnable par défaut.

<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>
14
Ben Schenker

Essayez ci-dessous un exemple de code pour cela:
Remplacez yourValue par la valeur que vous souhaitez sélectionner par défaut

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