Angular Material md-select 默认选择值 [英] Angular Material md-select default selected value

问题描述

我将 Angular 2 与 Angular Material 一起使用.查看文档，我试图让选择具有与空占位符相反的默认值.

I am using Angular 2 with Angular Material. Looking at the documentation, I am trying to get the select to have a default value as oppose to an empty place holder.

我尝试了以下两个选项，但都没有设置默认值

I have tried the following two options and both of them does not set a default value

<md-select selected="1">
  <md-option value="1" >One</md-option>
  <md-option value="2">Two</md-option>
</md-select>

<md-select>
  <md-option value="1" selected="true">One</md-option>
  <md-option value="2">Two</md-option>
</md-select>

我查看了所有文档和示例，但没有一个帮助

I looked at all the documentations and the examples, non of them helped

推荐答案

使用 [(ngModel)]:

<mat-select [(ngModel)]="selectedOption">
  <mat-option value="1">One</mat-option>
  <mat-option value="2">Two</mat-option>
</mat-select>

组件:

selectedOption = '1';

selectedOption = '1';

演示

编辑 #1:

由于 Material2.0.0#beta10(特别是 this PR) 您可以使用 MatSelect 的 value 属性选择一个值>:

Since Material2.0.0#beta10 (specifically this PR) you can select a value using the value property of MatSelect:

<mat-select [value]="selectedOption">
  <mat-option value="1">One</mat-option>
  <mat-option value="2">Two</mat-option>
</mat-select>

组件:

selectedOption = '1';

selectedOption = '1';

请注意，您也可以将它与双向数据绑定一起使用 ->[(值)].

Note that you can also use it with two-way data binding -> [(value)].

演示

这篇关于Angular Material md-select 默认选择值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！