Angular Material md-select 默認選擇值

Question

我正在使用 Angular 2 和Angular Material 。 查看文檔，我試圖讓選擇具有與空占位符相反的默認值。

我嘗試了以下兩個選項，它們都沒有設置默認值

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

我查看了所有文檔和示例，但都沒有幫助。

Answer 1

使用[(ngModel)] ：

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

零件：

selectedOption = '1';

演示

---

編輯＃1：

由於Material2.0.0#beta10 （特別是這個 PR ），您可以使用MatSelect的value屬性選擇一個值：

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

零件：

selectedOption = '1';

請注意，您也可以將它與雙向數據綁定 -> [(value)]一起使用。

演示

Answer 2

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

我們可以很容易地使用將值設置為默認值來做到這一點

Answer 3

根據文檔，您可以通過以下方式進行操作。

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

選項：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>

它必須是選擇下拉列表的任何值。 否則它將無法正常工作。

Answer 4

<mat-select formControlName="timezone" required [(ngModel)]="selectedOption">
      <mat-option *ngFor="let item of array" [value]="item.value">{{item.name}}</mat-option>
</mat-select>

為了正確工作需要綁定值[value]否則它不起作用

Answer 5

如果您使用的是響應式表單，您可以這樣做：

在您的模板中：

<mat-form-field>
   <mat-label>Sexo</mat-label>
   <mat-select [formControlName]="'sex'" #sexField>
      <mat-option value="2">Masculino</mat-option>
      <mat-option value="1">Femenino</mat-option>
      <mat-option value="3">Otro</mat-option>
   </mat-select>
</mat-form-field>

並在您的組件中：

form: FormGroup;
 
constructor(private _formBuilder: FormBuilder) {
}

ngOnInit() {
  

    this.form = this._formBuilder.group({        
        sex: ['2'], // set default option           
    });

     
    if (weAreEditing) {
        this.form.controls['sex'].setValue(edit.sex.id + ''); // set the option that you want
    }

}