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

Рабочий 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';

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

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

Попробуй это

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

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

}

HTML

<mat-form-field>
<mat-select [(ngModel)] = "modeSelect" placeholder = "Mode">
  <mat-option *ngFor = "let obj of Array"  [value] = "obj.value">{{obj.value}}</mat-option>
</mat-select>

Теперь установите значение по умолчанию на

modeSelect

, где вы получаете значения в переменной Array.

Некоторое время меня волновал этот вопрос. Я использовал реактивные формы и исправил этим методом. PS. Использование Angular 9 и Material 9.

В хуке жизненного цикла "ngOnInit"

1) Получите объект, который вы хотите установить по умолчанию, из вашего массива или литерала объекта

const countryDefault = this.countries.find(c => c.number === '826');

Здесь я беру объект Соединенного Королевства из своего массива стран.

2) Затем установите объект FormBuilder (mat-select) со значением по умолчанию.

this.addressForm.get('country').setValue(countryDefault.name);

3) Наконец ... установите свойство связанного значения. В моем случае мне нужно значение имени.

<mat-select formControlName = "country">
   <mat-option *ngFor = "let country of countries" [value] = "country.name" >
          {{country.name}}

  </mat-option>
</mat-select>

Работает как шарм. Я надеюсь, что это помогает

Обычно вы собираетесь сделать это в своем шаблоне с помощью FormGroup, Reactive Forms и т. д.

    this.myForm = this.fb.group({
      title: ['', Validators.required],
      description: ['', Validators.required],
      isPublished: ['false',Validators.required]
    });

Я хотел бы добавить сюда ответ Нарм и добавить то же самое, что и комментарий под ее ответом.

Обычно тип данных значения, присвоенного [(value)], должен соответствовать типу данных атрибута [value], используемого для mat-options. Особенно, если кто-то заполняет параметры, используя * ngFor, как показано ниже

<mat-form-field fxHide.gt-sm='true'>
        <mat-select [(value)] = "heroes[0].id">
          <mat-option *ngFor = "let hero of heroes" [value] = "hero.id">{{ hero.name }}</mat-option>
        </mat-select>
</mat-form-field>

Обратите внимание: если вы измените [(value)] = "heroes [0] .id" на [(value)] = "heroes [0] .name", это не будет работать, поскольку типы данных не совпадают.

Это мои выводы, пожалуйста, не стесняйтесь исправлять меня, если это необходимо.

Мне потребовалось несколько часов, чтобы понять это, пока схожесть типов данных между массивом и значением по умолчанию не сработала для меня ...

Использование модели формы (реактивные формы)

--- Html code--
<form [formGroup] = "patientCategory">
<mat-form-field class = "full-width">
    <mat-select placeholder = "Category" formControlName = "patientCategory">
        <mat-option>--</mat-option>
        <mat-option *ngFor = "let category of patientCategories" [value] = "category">
            {{category.name}} 
        </mat-option>
    </mat-select>
</mat-form-field>

---- код ts ---

ngOnInit() {

        this.patientCategory = this.fb.group({
            patientCategory: [null, Validators.required]
        });

      const toSelect = "Your Default Value";
      this.patientCategory.get('patientCategory').setValue(toSelect);
    }

Без формы Модель

--- html code --
<mat-form-field>
  <mat-label>Select an option</mat-label>
  <mat-select [(value)] = "selected">
    <mat-option>None</mat-option>
    <mat-option value = "option1">Option 1</mat-option>
    <mat-option value = "option2">Option 2</mat-option>
    <mat-option value = "option3">Option 3</mat-option>
  </mat-select>
</mat-form-field>

---- код ts - selected = 'option1'; Здесь позаботьтесь о типе присвоения значения

On your typescript file, just assign this domain on modeSelect on Your ngOnInit() method like below:



 ngOnInit() {
        this.modeSelect = "domain";
      }

И в своем 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>

Прочтите это, если вы заполняете свой mat-select асинхронно через HTTP-запрос.

Если вы используете службу для выполнения вызова api для возврата значений параметров выбора mat-select, вы должны установить «выбранное значение» в элементе управления формы как часть «завершенного» раздела вашего вызова api службы subscribe ().

Например:

  this.customerService.getCustomers().subscribe(
  customers => this.customers = customers ,
  error => this.errorMessage = error as any,
  () => this.customerSelectControl.setValue(this.mySelectedValue));