如何在角度2材质设计的md-select元件上设置默认值？

我有以下选择组件从填充来自休息api的数据中填充。如何在md-select上设置默认选定值？如何在角度2材质设计的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>

来源

2017-01-23 abdul.badru

在创建组（或更高版本的setValue）'主题：新FormControl（ '默认选项名称'）' – BenRacicot

你可以尝试以下，

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

希望这有助于！

来源

2017-01-23 17:20:45

奇怪，它并没有MD-选项工作。 @ md-select placeholder =“最喜欢的食物”[（ngModel）] =“selectedValue”name =“food”> – user321

@Skyware，你检查过Plunker吗？我已经更新了最新的Angular资料。 –

要将默认值设置为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>

组件脚本=>

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

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

来源

2017-04-17 08:54:02

当您使用MD-期权价值的对象，默认值和correponding的对象引用选项列表中的选项不相等。

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

Check this example

来源

2017-10-02 17:07:06 abahet

如何在角度2材质设计的md-select元件上设置默认值？

回答

相关问题