Angular 在mat select中设置默认选项

在我的角材质项目中有一个简单的选择选项表单字段：

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属性

我希望在页面加载时默认选择

域

ng selected

对我不起作用

无需使用

ngModel

或表单

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

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


导出类AppComponent{
defaultValue='域'；
}
试试这个

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


另外，别忘了在应用程序中导入
FormsModule
。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';
} 

}

模板：
度假目的地
纽约
伦敦
德里
奥斯陆
组成部分：
导出类WhateverComponent在init上实现的内容{
selectedCity:字符串；
}
恩戈尼尼特（）{
this.selectedCity='london'；
} 
}
HTML


{{obj.value}}


现在将默认值设置为

模式选择

，从中获取数组变量中的值。
这个问题让我烦恼了一段时间。我用的是反应形式，我用这个方法修复了它。使用角度9和材料9

在“ngOnInit”生命周期钩子中

1） 从数组或对象文字中获取要设置为默认值的对象

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

这里我从我的国家阵列中抓取英国物体

2） 然后将formsbuilder对象（mat选择）设置为默认值

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

3） 最后…设置绑定值属性。在我的例子中，我需要name值

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

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


{{country.name}

工作起来很有魅力。我希望它有帮助
通常，您将在模板中使用FormGroup、被动表单等来完成此操作

this.myForm=this.fb.group({
标题：[''，验证器。必填]，
描述：[''，验证器。必需]，
iPublished:['false'，验证器。必需]
});
我想在这里补充纳姆的答案，并在她的答案下添加了相同的评论

基本上，分配给[（value）]的值的数据类型应该与mat选项使用的[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>


{{hero.name}

请注意，如果将[（值）]=“heroes[0].id”更改为[（值）]=“heroes[0].name”，则由于数据类型不匹配，该选项将无法工作

这些是我的发现，如果需要，请随时更正。
我花了几个小时才弄明白这一点，直到数组和默认值之间的数据类型相似性对我起作用…
使用表单模型（反应式表单）

不带外形模型

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

---html代码--
选择一个选项
没有一个
选择1
选择2
选择3

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


领域
准确的
如果您通过http请求异步填充mat select，请阅读此内容

如果您正在使用服务进行api调用以返回mat select options值，则必须将表单控件上的“选定值”设置为服务api调用subscribe（）的“完成”部分的一部分

例如：

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

你好谢谢你的回答，这就是我尝试它时得到的结果：无法绑定到“selected”，因为它不是“mat option”的已知属性。如何对“multi-select”执行此操作？我试过这个，但它不起作用。ts文件：selected=['domain，exact']；这对我不管用。我在
[（value）]
属性中输入的任何内容都不会显示在
mat select
中。这几乎对我有效，它设置了所选的值，但没有初始化表单控件以在加载时直观地显示正确的值。在.ts文件中，我还必须添加到ngOnInit（）：
this.myForm.controls.myControl.setValue（“defaultValue”）
仅供参考，您需要确保默认值的数据类型与选项的数据类型匹配，例如，{{hero.name}将起作用。但是如果你给[（value）]分配一个字符串类型，它就不起作用了。你好，我在尝试你的答案时遇到了这个错误：错误：如果在表单标记中使用了ngModel，必须在ngModelOptions中设置name属性或将form控件定义为“standalone”。是否有mat form field？Hello这使属性modeselect='domain'，但默认情况下似乎没有选择domain选项我已更新了答案，请检查工作堆栈BlitzHello Vika，因为存在动态*ng中的值当时如何使用id显示？@AmishaRana您的意思是如果数据是动态的，如何显示默认值吗？？？@AmishaRana看看这将帮助您提供完整的答案这是一个适用于角度9或更大的问题。非常感谢。问题是，如果heroes“还”不包含任何数据，它将抛出一个错误如果数组或字典不包含任何值，但与上面的索引一起使用，它将抛出一个错误，通常是“索引越界”或类似的错误，这是一种预期行为。你有错误吗？如果是，错误是什么？如果您的
heroes
数据源来自服务器，则会出现错误。这不是索引超出范围错误，因为中没有
id
<
On your typescript file, just assign this domain on modeSelect on Your ngOnInit() method like below:



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

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

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