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

Question

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

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 у меня не работал

Answer 1

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

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

Answer 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';
}

Live демо

Кроме того, не забудьте импортировать FormsModuleв вашем приложении. модуль

Answer 3

Рабочий StackBlitz

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

В вашем 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';