角度材质：材质选择不选择默认值

Question

我有一个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>

我已尝试将selected2和mat选项中的值设置为对象及其id，并尝试在mat-select中同时使用[（value）]和[（ngModel）]，但都不起作用。

我使用的是材料版本2.0。0-β。10




Answer 1

我在mat select中使用Angular 5和reactive forms，但无法获得上述任一解决方案来显示初始值。

我不得不添加[compareAnd]来处理在matt-Select组件中使用的不同类型。在内部，mat-Select似乎使用数组来保存选定的值。如果打开该模式，这可能会允许相同的代码在多个选择下工作。

角度选择控制文件

以下是我的解决方案：

初始化窗体控件的窗体生成器：

this.formGroup = this.fb.group({
    country: new FormControl([ this.myRecord.country.id ] ),
    ...
});

然后在组件上实现compareWith功能：

compareIds(id1: any, id2: any): boolean {
    const a1 = determineId(id1);
    const a2 = determineId(id2);
    return a1 === a2;
}

接下来创建并导出determineId函数（我必须创建一个独立函数，以便mat select可以使用它）：

export function determineId(id: any): string {
    if (id.constructor.name === 'array' && id.length > 0) {
       return '' + id[0];
    }
    return '' + id;
}

最后，将compareWith属性添加到mat select：

<mat-form-field hintLabel="select one">
<mat-select placeholder="Country" formControlName="country" 
    [compareWith]="compareIds">

    <mat-option>None</mat-option>
    <mat-option *ngFor="let country of countries" [value]="country.id">
                        {{ country.name }}
    </mat-option>
</mat-select>
</mat-form-field>

Answer 2

使用compareBy，一个函数来比较选项值和所选值。请参见这里：https://material.angular.io/components/select/api#MatSelect

对于具有以下结构的对象：

listOfObjs = [{ name: 'john', id: '1'}, { name: 'jimmy', id: '2'},...]

像这样定义标记：

<mat-form-field>
  <mat-select
    [compareWith]="compareObjects"
    [(ngModel)]="obj">
       <mat-option  *ngFor="let obj of listOfObjs" [value]="obj">
          {{ obj.name }}
       </mat-option>
    </mat-select>
</mat-form-field>

并定义如下比较函数：

compareObjects(o1: any, o2: any): boolean {
  return o1.name === o2.name && o1.id === o2.id;
}

Answer 3

对模板中的值使用绑定。

value="{{ option.id }}"

应该是

[value]="option.id"

在您选择的值中，使用ngModel而不是value。

<mat-select [(value)]="selected2">

应该是

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

完整代码：

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

从版本2.0开始，在旁注上。0-β。12物料选择现在接受一个mat表单字段元素作为父元素，因此它与其他物料输入控件一致。升级后，将div元素替换为mat form field元素。

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