Angular Material: mat-select无法选择默认值

Question

Angular Material: mat-select无法选择默认值

167

我有一个 mat-select，其中所有选项都是在数组中定义的对象。我试图将该值设置为默认选项之一，但在页面呈现时，它仍然被选中。

我的 TypeScript 文件包含：

  public options2 = [
    {"id": 1, "name": "a"},
    {"id": 2, "name": "b"}
  ]
  public selected2 = this.options2[1].id;

我的HTML文件包含：

  <div>
    <mat-select
        [(value)]="selected2">
      <mat-option
          *ngFor="let option of options2"
          value="{{ option.id }}">
        {{ option.name }}
      </mat-option>
    </mat-select>
  </div>

我已经尝试将mat-option中的selected2和value设置为对象及其ID，并在mat-select中同时使用了[(value)]和[(ngModel)]，但都没有起作用。

我正在使用Material版本2.0.0-beta.10。

- William Moore

2

使用 compareWith，更加优雅。 - Badis Merabet

必须要有 compareWith，请参考这里的badis答案 https://dev59.com/JFYN5IYBdhLWcg3whIXz - bresleveloper

19个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Facu Quintana · Answer 1

尝试一下！

this.selectedObjectList = [{id:1}, {id:2}, {id:3}]
this.allObjectList = [{id:1}, {id:2}, {id:3}, {id:4}, {id:5}]
let newList = this.allObjectList.filter(e => this.selectedObjectList.find(a => e.id == a.id))
this.selectedObjectList = newList

- Zia Khan · Answer 2

唯一的解决方案是，在mat-select标签内，您的表单控件或Ng Model值必须与分配给option标签中的value的文本匹配。以下是ts文件：

selectedFood = 'Tacos';

模板

    <mat-form-field appearance="fill">
      <mat-label>Favorite Food</mat-label>
      <mat-select [(value)]="selectedFood">
        <mat-option value=''>---------</mat-option>
<mat-option value='Tacos'>Tacos</mat-option>
<mat-option value='Pizza'>Pizza</mat-option>
        
      </mat-select>
    </mat-form-field>
    <p>You selected: {{selectedFood}}</p>

- Dominik Miedziński · Answer 3

只有当MatSelect上的value属性可比较MatOption上绑定的value属性时，绑定或设置默认值才起作用。如果将您的项目的caption绑定到mat-option元素的value属性，则必须将caption设置为您的项目的默认元素。如果将您的项目的Id绑定到mat-option，则必须将id绑定到mat-select，而不是整个项目、标题或任何其他字段，只能是相同的字段。

但您需要使用绑定[]来完成它。

- Juan Antonio · Answer 4

非常简单的方法是使用带有默认值的 formControl，并将其放置在一个 FormGroup（可选）中。以下是一个示例，使用单位选择器输入面积：

ts

H_AREA_UNIT = 1;
M_AREA_UNIT = 2;

exampleForm: FormGroup;

this.exampleForm = this.formBuilder.group({
  areaUnit: [this.H_AREA_UNIT],
});

html

<form [formGroup]="exampleForm">
 <mat-form-field>
   <mat-label>Unit</mat-label>
   <mat-select formControlName="areaUnit">
     <mat-option [value]="H_AREA_UNIT">h</mat-option>
     <mat-option [value]="M_AREA_UNIT">m</mat-option>
   </mat-select>
 </mat-form-field>
</form>

- Noob · Answer 5

我做了这个。

<div>
    <mat-select [(ngModel)]="selected">
        <mat-option *ngFor="let option of options" 
            [value]="option.id === selected.id ? selected : option">
            {{ option.name }}
        </mat-option>
    </mat-select>
</div>

通常情况下，您可以执行[value]="option"，除非您的选项来自某个数据库？？我认为获取数据的延迟导致其无法工作，或者获取的对象在某种程度上不同，即使它们是相同的？？奇怪的是，最有可能是后者，因为我还尝试过[value]="option === selected ? selected : option"，但它也没有起作用。

- Alex Cooper · Answer 6

我非常仔细地按照上述步骤操作，但仍然无法选择初始值。

原因是尽管我的绑定值在typescript中被定义为字符串，但我的后端API返回的是一个数字。

Javascript松散类型在运行时简单地更改了类型（没有错误），这阻止了选择初始值。

组件

myBoundValue: string;

模板

<mat-select [(ngModel)]="myBoundValue">

解决方案是更新API以返回字符串值。

- lilandos didas · Answer 7

public options2 = [
  {"id": 1, "name": "a"},
  {"id": 2, "name": "b"}
]
 
YourFormGroup = FormGroup; 
mode: 'create' | 'update' = 'create';

constructor(@Inject(MAT_DIALOG_DATA) private defaults: defautValuesCpnt,
      private fb: FormBuilder,
      private cd: ChangeDetectorRef) {
}
  
ngOnInit() {

  if (this.defaults) {
    this.mode = 'update';
  } else {
    this.defaults = {} as Cpnt;
  }

  this.YourFormGroup.patchValue({
    ...
    fCtrlName: this.options2.find(x => x.name === this.defaults.name).id,
    ... 
  });

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

}

  <div>
    <mat-select formControlName="fCtrlName"> <mat-option
          *ngFor="let option of options2"
          value="{{ option.id }}">
        {{ option.name }}
      </mat-option>
    </mat-select>
  </div>

- Arokia Lijas · Answer 8

TS

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

   this.optionsFG.get('optionValue').setValue(option[0]); //option is the arrayName

HTML

   <div class="text-right" [formGroup]="optionsFG">
     <mat-form-field>
         <mat-select placeholder="Category" formControlName="optionValue">
           <mat-option *ngFor="let option of options;let i =index" [value]="option">
            {{option.Value}}
          </mat-option>
        </mat-select>
      </mat-form-field>
  </div>

- Juan · Answer 9

数字和字符串之间的比较以前是错误的，所以在ngOnInit中将您选择的值转换为字符串，它就可以工作了。

我遇到了同样的问题，我使用枚举填充了mat-select，使用

Object.keys(MyAwesomeEnum).filter(k => !isNaN(Number(k)));

我有一个枚举值要选择...

我花了几个小时苦苦思索，试图找出为什么它不起作用。最后，在渲染 mat-select 中使用的所有变量、键集合和所选内容之后，我终于解决了问题... 如果你有 ["0","1","2"] 并且想选择 1（这是一个数字）1=="1" 是错误的，因此没有任何东西被选中。

所以，解决方案就是在 ngOnInit 中将所选值转换为字符串，然后它就可以工作了。