Установите опцию по умолчанию в mat-select

У меня есть простое поле формы выбора в моем проекте "Угловой материал":

component.html

  <mat-form-field>
    <mat-select [(value)]="modeSelect" placeholder="Mode">
      <mat-option value="domain">Domain</mat-option>
      <mat-option value="exact">Exact</mat-option>
    </mat-select>
  </mat-form-field>

Где [(value)]="modeSelect" привязывается к свойству modeSelect в файле component.ts

Я хочу сделать так, чтобы по умолчанию при загрузке страницы был выбран параметр <mat-option value="domain">Domain</mat-option>.

ng-selected не работал для меня

Ответ 1

Рабочий стол StackBlitz

Нет необходимости использовать ngModel или Forms

В вашем html:

 <mat-form-field>
  <mat-select [(value)]="selected" placeholder="Mode">
    <mat-option value="domain">Domain</mat-option>
    <mat-option value="exact">Exact</mat-option>
  </mat-select>
</mat-form-field>

и в вашем компоненте просто установите ваше общедоступное свойство, selected по умолчанию:

selected = 'domain';

Ответ 2

Попробуйте это

<mat-form-field>
    <mat-select [(ngModel)]="modeselect" [placeholder]="modeselect">
        <mat-option value="domain">Domain</mat-option>
        <mat-option value="exact">Exact</mat-option>
    </mat-select>
</mat-form-field>

Компонент:

export class SelectValueBindingExample {
    public modeselect = 'Domain';
}

Живая демоверсия

Также не забудьте импортировать FormsModule в ваш app.module

Ответ 3

Попробуй это:

<mat-select [(ngModel)]="defaultValue">
export class AppComponent {
  defaultValue = 'domain';
}

Ответ 4

I was able to set the default value or whatever value using the following:

Template:
          <mat-form-field>
              <mat-label>Holiday Destination</mat-label>
              <mat-select [(ngModel)]="selectedCity" formControlName="cityHoliday">
                <mat-option [value]="nyc">New York</mat-option>
                <mat-option [value]="london">London</mat-option>
                <mat-option [value]="india">Delhi</mat-option>
                <mat-option [value]="Oslo">Oslo</mat-option>
              </mat-select>
          </mat-form-field>

Component:

export class WhateverComponent implements OnInit{

selectedCity: string;    

}

ngOnInit() {
    this.selectedCity = 'london';
} 

}