如何在角度2材料设计中设置md-select组件的默认值?

时间:2017-01-23 17:02:56

标签: angular material-design angular-material2

我有以下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>

3 个答案:

答案 0 :(得分:19)

你可以在下面试试,

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

选中StackBlitz

希望这会有所帮助!!

答案 1 :(得分:1)

要将默认值设置为md-select,您需要将默认值设置为您在[(ngModel)]中使用的变量。在你的情况下:

组件Html =&gt;

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

组件脚本=&gt;

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

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

答案 2 :(得分:1)

在md-option值中使用对象时,默认值的对象引用和选项列表中的相应选项不相等。

要解决此问题,您需要在设置FormGroup之前使用选项列表中的相应选项覆盖默认值。

Check this example