在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

工作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';

Answer 2

这个问题困扰了我一段时间。我使用的是反应式形式，并使用这种方法修复了它。附注。使用 Angular 9 和 Material 9。

在“ngOnInit”生命周期钩子中

1) 从数组或对象字面量中获取要设置为默认值的对象

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

在这里，我从我的国家/地区数组中获取英国对象。

2) 然后将 formsbuilder 对象（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>

奇迹般有效。我希望它有帮助

Answer 3

尝试这个

<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

Answer 4

使用表单模型（反应式表单）

--- HTML 代码 ---

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

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

这里要注意赋值的类型

Answer 5

我想在这里添加 Narm 的答案，并在她的答案下添加了与评论相同的内容。

基本上分配给 [(value)] 的值的数据类型应该与用于 mat-options 的 [value] 属性的数据类型匹配。特别是如果有人使用 *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" 它将不起作用，因为数据类型不匹配。

这些是我的发现，如果需要，请随时纠正我。