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

我想这样做，以便在页面加载时默认选择<mat-option value="domain">Domain</mat-option>。

ng-selected对我不起作用

Answer 1

Working 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

这个问题困扰了我一段时间。我当时使用反应形式，并使用此方法对其进行了修复。 PS。使用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

试试这个

response()

组件：

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

另外，请不要忘记在app.module

中导入

export class SelectValueBindingExample {
    public modeselect = 'Domain';
}

Answer 4

我想在此处添加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”，则由于数据类型不起作用， t匹配。

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

Answer 5

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

}

Answer 6

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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  /*background-image: linear-gradient(120deg, #f6d365, #fda08f);*/
  background-color: #5cdb95;
  color: #0b0c0b;
  font-family: "Bree Serif";
  min-height: 100vh;
}

h1 {
  font-size: 2rem;
  display: flex;
  justify-content: center;
  align-content: center;
}

form {
  padding-top: 2rem;
  display: flex;
  justify-content: center;
  align-content: center;
}

form input,
form button {
  padding: 0.5rem;
  font-size: 2rem;
  border: none;
  background: #edf5e1;
}

form button {
  color: #5cdb95;
  background: #edf5e1;
  cursor: pointer;
  transition: all 0.3s ease;
}

form button :hover {
  color: #46a771;
}

.todo-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.todo-list {
  min-width: 50%;
  list-style: none;
}

.todo {
  margin: 0.5rem;
  background: #379683;
  border-radius: 10px;
  text-align: left;
  padding-left: 10px;
  font-size: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.todo li {
  flex: 10%;
}

.trash-btn,
.complete-btn {
  background: #5cdb95;
  color: #edf5e1;
  font-size: 1rem;
  margin: 4px 2px;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
}

.trash-btn {
  color: rgb(233, 47, 78);
  font-size: 2rem;
}

.complete-btn {
  color: steelblue;
  font-size: 2rem;
}


/*
.trash-btn, .complete-btn {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    border-radius: 50%;
}

.trash-btn, .complete-btn :hover{
    cursor: pointer;
}

.fas fa-fa-check :hover{
    cursor: pointer;

}
*/

---- ts代码---

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

没有表格模型

ngOnInit() {

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

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

---- ts代码- selected ='option1'; 这里要注意分配值的类型

Answer 7

如果您通过 http 请求异步填充 mat-select，请阅读此内容。

如果您使用服务进行 api 调用以返回 mat-select 选项值，则必须在表单控件上设置“选定值”，作为服务 api 调用 subscribe() 的“完成”部分的一部分).

例如：

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

Answer 8

试试这个：

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

Answer 9

通常，您将在模板中使用FormGroup，Reactive Forms等来完成此操作...

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

Answer 10

HTML

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

现在将您的默认值设置为

modeSelect

，您将在其中获取Array变量中的值。

Answer 11

我花了几个小时才弄清楚这一点，直到数组和默认值之间的数据类型相似对我有用...

在mat-select中设置默认选项

11 个答案: