example - angular material themes

¿Cómo establezco el valor predeterminado en el componente md-select desde el diseño del material angular 2?

Question

Tengo el siguiente componente de selección que se rellena a partir de datos que provienen de una API de descanso. ¿Cómo puedo establecer el valor seleccionado predeterminado en md-select?

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

Answer 1

Cuando utiliza Objetos en el valor de opción md, la referencia de objeto del valor predeterminado y la opción correspondiente en la lista de opciones no son iguales.

Para solucionar este problema, debe anular el valor predeterminado utilizando la opción correspondiente en la lista de opciones antes de configurar FormGroup.

Mira este ejemplo

Answer 2

Para establecer el valor predeterminado en md-select, debe establecer el valor predeterminado en la variable que está utilizando en [(ngModel)]. En tu caso:

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

Componente Script =>

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

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

Answer 3

puede intentar a continuación,

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

Guion componente

@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 clave aquí es establecer el valor selectedValue con el valor inicial.

Compruebe este StackBlitz .

¡¡Espero que esto ayude!!