在 mat-select 中设置默认选项 [英] Set default option in mat-select

问题描述

我的 Angular 材质项目中有一个简单的选择选项表单字段:

I have a simple select option form field in my Angular material project:

component.html

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" 绑定到 component.ts 文件中的 modeSelect 属性

Where [(value)]="modeSelect" is binded to the modeSelect property in the component.ts file

我想让 <mat-option value="domain">Domain</mat-option> 在页面加载时被默认选中.

I want to make it so the <mat-option value="domain">Domain</mat-option> is selected by default on page load.

ng-selected 对我不起作用

推荐答案

工作 StackBlitz

无需使用 ngModel 或 Forms

No need to use ngModel or Forms

在你的 html 中:

In your 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 设置为默认值:

and in your component just set your public property selected to the default:

selected = 'domain';

这篇关于在 mat-select 中设置默认选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！