Как установить значение по умолчанию для компонента md-select из углового материала 2?

Question

У меня есть следующий компонент select, который заселяется из данных, поступающих из rest api. Как установить значение по умолчанию для 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

вы можете попробовать ниже,

Компонент 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> 

компонент сценария

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

Ключевым моментом здесь является установка selectedValue с начальным значением.

Проверьте это Plunker.

Надеюсь, что это поможет!

Answer 2

Чтобы установить значение по умолчанию для md-select, вам необходимо установить значение по умолчанию для переменной, которую вы используете в [(ngModel)]. В вашем случае:

Компонент 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> 

Компонент Script =>

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

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

Answer 3

При использовании объектов в значение мкр-опции, ссылка на объект значения по умолчанию и correponding в списке опций не равны.

Чтобы исправить это, перед настройкой FormGroup вам необходимо переопределить значение по умолчанию с помощью соответствующей опции в списке опций.

Check this example