Angular Material md-select default selected value

前端 未结 3 889
北荒
北荒 2021-01-07 17:36

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.

相关标签:
3条回答
  • 2021-01-07 18:26

     <mat-select [value]="0" >

    We can easily do it using setting value to default value

    0 讨论(0)
  • 2021-01-07 18:33

    Use [(ngModel)]:

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

    Component:

    selectedOption = '1';

    DEMO


    Edit #1:

    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>
    

    Component:

    selectedOption = '1';

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

    DEMO

    0 讨论(0)
  • 2021-01-07 18:43

    According to documentation you can do by the following way.

    Option:1

    <md-select value={{ defaultValue }}>
      <md-option value="{{ defaultValue }}">{{defaultValue}}</md-option>
      <md-option value="1">One</md-option>
      <md-option value="1">One</md-option>
      <md-option value="2">Two</md-option>
    </md-select>
    

    Option:2

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

    It must any value of select dropdown. Else it will not work.

    0 讨论(0)
提交回复
热议问题