![](/img/trans.png)
[英]How do I update model value on md-select component onchange event from angular 2 material design?
[英]How do I set default value on md-select component from angular 2 material design?
我有以下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>
你可以尝试下面,
组件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 。
希望这可以帮助!!
要将默认值设置为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"
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.