Angular Material md-select 默认选择值答案

【问题标题】：Angular Material md-select default selected valueAngular Material md-select 默认选择值
【发布时间】：2022-01-27 20:09:07
【问题描述】：

我正在使用带有Angular Material 的Angular 2。查看文档，我试图让选择具有与空占位符相反的默认值。

我尝试了以下两个选项，它们都没有设置默认值

<md-select selected="1">
  <md-option value="1" >One</md-option>
  <md-option value="2">Two</md-option>
</md-select>

<md-select>
  <md-option value="1" selected="true">One</md-option>
  <md-option value="2">Two</md-option>
</md-select>

我查看了所有的文档和示例，没有任何帮助

【问题讨论】：

标签： angular angular-material2

【解决方案1】：

使用[(ngModel)]：

<mat-select [(ngModel)]="selectedOption">
  <mat-option value="1">One</mat-option>
  <mat-option value="2">Two</mat-option>
</mat-select>

组件：

selectedOption = '1';

DEMO

编辑#1：

由于Material2.0.0#beta10（特别是this PR），您可以使用value 的value 属性选择一个值MatSelect：

<mat-select [value]="selectedOption">
  <mat-option value="1">One</mat-option>
  <mat-option value="2">Two</mat-option>
</mat-select>

组件：

selectedOption = '1';

请注意，您也可以将其与 双向数据绑定 -> [(value)] 一起使用。

DEMO

【讨论】：

那行得通。你是怎么发现这是这样做的？文档中没有提到这一点
这是 Angular 的基本功能。 Angular Material 站点/api/docs 仍在建设中，仍处于测试阶段。
你能看看 Angular Material 文档吗？对于 md 选项，有一个 selected 属性和一个方法 select()。像普通的 html 下拉菜单一样执行 md-option selected="true" 之类的操作是否有意义？
是否有 md-option 的属性使其成为默认值？
这对我不起作用 (see here) - 知道我做错了什么吗？

【解决方案2】：

 &lt;mat-select [value]="0" &gt;

我们可以很容易地使用将值设置为默认值来做到这一点

【讨论】：

请记住，如果您需要在选择新选项后获取值，请使用 Banana-in-a-Box 方法接收将更新值的事件：<mat-select [(value)]="selectedValue" >。然后只需在你的组件中初始化selectedValue，你也可以收听它。

【解决方案3】：

根据documentation可以通过以下方式进行。

选项：1

<md-select value={{ defaultValue }}>
  <md-option value="{{ defaultValue }}">{{defaultValue}}</md-option>
  <md-option value="1">One</md-option>
  <md-option value="1">One</md-option>
  <md-option value="2">Two</md-option>
</md-select>

选项：2

<md-select value="None">
  <md-option value="None">None</md-option>
  <md-option value="1">One</md-option>
  <md-option value="1">One</md-option>
  <md-option value="2">Two</md-option>
</md-select>

它必须是选择下拉列表的任何值。否则将无法正常工作。

【讨论】：

【解决方案4】：

<mat-select formControlName="timezone" required [(ngModel)]="selectedOption">
      <mat-option *ngFor="let item of array" [value]="item.value">{{item.name}}</mat-option>
</mat-select>

为了正确工作需要绑定值[value]，否则它不起作用

【讨论】：

【解决方案5】：

如果你使用的是响应式表单，你可以这样做：

在您的模板中：

<mat-form-field>
   <mat-label>Sexo</mat-label>
   <mat-select [formControlName]="'sex'" #sexField>
      <mat-option value="2">Masculino</mat-option>
      <mat-option value="1">Femenino</mat-option>
      <mat-option value="3">Otro</mat-option>
   </mat-select>
</mat-form-field>

在你的组件中：

form: FormGroup;
 
constructor(private _formBuilder: FormBuilder) {
}

ngOnInit() {
  

    this.form = this._formBuilder.group({        
        sex: ['2'], // set default option           
    });

     
    if (weAreEditing) {
        this.form.controls['sex'].setValue(edit.sex.id + ''); // set the option that you want
    }

}

【讨论】：