Comment puis-je définir la valeur par défaut sur la md sélectionner un composant à partir angulaire 2 la conception de matériel?

J'ai le texte suivant sélectionner un composant qui est renseigné à partir des données provenant d'une api rest. Comment puis-je définir la valeur sélectionnée par défaut sur la md choisir?

  <md-select
                placeholder= "Warehouse"
                style="width: 100%"
                [(ngModel)]='selectedProductWarehouse.warehouse'
                name="Warehouse"
                required
                #Warehouse="ngModel">
          <md-option *ngFor="let warehouse of warehouses" [value]="warehouse">{{warehouse.description}}</md-option>
        </md-select>
lorsque vous créez le groupe (ou plus tard avec setValue) subject: new FormControl('default option name')

OriginalL'auteur abdul.badru | 2017-01-23

  1. 18

    vous pouvez essayer ci-dessous,

    Composant HTML 

      <md-select placeholder="Favorite food" [(ngModel)]="selectedValue" name="food">
    <md-option *ngFor="let food of foods" [value]="food.value" >
      {{food.viewValue}}
    </md-option>
  </md-select>

  <p> Selected value: {{selectedValue}} </p>

    Composant de script 

    @Component({
  selector: 'select-form-example',
  templateUrl: './select-form-example.html',
})
export class SelectFormExample {
  foods = [
    {value: 'steak-0', viewValue: 'Steak'},
    {value: 'pizza-1', viewValue: 'Pizza'},
    {value: 'tacos-2', viewValue: 'Tacos'}
  ];


   //setting this is the key to initial select.
   selectedValue: string = this.foods[0].value;
}

    La clé ici est la mise selectedValue avec la valeur initiale.

    Cochez cette StackBlitz.

    Espérons que cette aide!!

    Étrange, il ne fonctionne pas sans md-option. <md-sélectionnez l'espace réservé="nourriture Préférée" [(ngModel)]="selectedValue" name="alimentaire"></md-select>
    Avez-vous vérifié le Plunker? J'ai mis à jour avec les dernières Angulaire du matériel.
    Si vous n'êtes pas en utilisant " name="alimentaire" ' , ça ne marchera pas.
    Plunker est si lent, je ne l'ai jamais vu se charger complètement.
    Plunker a eu quelques problèmes de sorte qu'il n'était pas de chargement, mise à jour le stackblitz exemple.

    OriginalL'auteur

  2. 1

    Pour définir la valeur par défaut de md-sélectionnez, vous devez définir la valeur par défaut de la variable que vous utilisez dans [(ngModel)]. Dans votre cas:

    Composant Html =>

    <md-select  
            placeholder= "Warehouse" style="width: 100%"
            [(ngModel)]='selectedProductWarehouse.warehouse'
            name="Warehouse"
            required
            #Warehouse="ngModel">
  <md-option *ngFor="let warehouse of warehouses" [value]="warehouse">
            {{warehouse.description}}
 </md-option>
</md-select>

    Composant de Script =>

    @Component({
  selector: 'select-form-example',
  templateUrl: './select-form-example.html',
})

constructor() {
  this.selectedProductWarehouse.warehouse = "default value"
}

    OriginalL'auteur

  3. 1

    Lorsque vous utilisez des Objets dans md-valeur d'option, l'objet de référence de la valeur par défaut et le procès correspondant option dans la liste des options ne sont pas égaux.

    Pour résoudre ce problème, vous devez remplacer la valeur par défaut à l'aide de l'concernées option dans les options de la liste avant de la FormGroup.

    Cochez cette exemple

    OriginalL'auteur