Comment définir la valeur par défaut de md-select component à partir de la conception du matériau angular 2?

vous pouvez essayer ci-dessous,

Component 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 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 de définir selectedValue avec la valeur initiale.

Cochez cette Plunker.

Espérons que cette aide!!

pour définir la valeur par défaut à md-select, vous devez définir la valeur par défaut à la variable que vous utilisez dans [(ngModel)]. Dans ton 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 Script =>

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

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

lorsque vous utilisez des objets dans la valeur md-option, la référence d'objet de la valeur par défaut et l'option correspondante dans la liste des options ne sont pas égales.

pour corriger cela, vous devez modifier la valeur par défaut en utilisant l'option correponding dans la liste des options avant de définir le FormGroup.

cochez cet exemple