角度材质:mat-select不选择默认值

Question

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

我的打字稿文件包含:

  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与value在mat-option给该对象和它的ID,并使用都不断地尝试[(value)]和[(ngModel)]在mat-select,但没有正常工作.

我使用的是材料版本2.0.0-beta.10

谢谢

Answer 1

对模板中的值使用绑定.

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-beta.12的旁注中,材质选择现在接受一个mat-form-field元素作为父元素,因此它与其他材质输入控件一致.升级后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>

Answer 2

使用compareWith,一种功能,用于将选项值与所选值进行比较.见这里: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

我正在使用带有mat-select的Angular 5和反应形式,并且无法获得上述任何一种解决方案来显示初始值.

我不得不添加[compareWith]来处理mat-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 4

你应该结合它[value]在mat-option下面,

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

现场演示

Answer 5

页面加载时，我在绑定第一个选项时遇到问题。下面有对我有帮助的解决方案

.html

<mat-form-field appearance="outline">    
    <mat-select #teamDropdown 
        [ngModel]="selectedGroupId" (selectionChange)="selectedGroupId=$event.value">
        <mat-option value=undefined>Please Select</mat-option>
        <mat-option *ngFor="let grp of groups" [value]="grp.groupsId">
            {{grp.groupName}}
        </mat-option>
    </mat-select>
</mat-form-field>

.ts

@ViewChild('teamDropdown') teamDropdown: MatSelect;
ngAfterViewInit() {
    setTimeout(() => {
        this.teamDropdown.options.first.select();
    });
}

Answer 6

正如在Angular 6中已经提到的，不建议使用ngModel以反应形式使用（并在Angular 7中将其删除），因此我如下修改了模板和组件。

模板：

<mat-form-field>
    <mat-select [formControl]="filter" multiple 
                [compareWith]="compareFn">
        <mat-option *ngFor="let v of values" [value]="v">{{v.label}}</mat-option>
    </mat-select>
</mat-form-field>

组件的主要部分（onChanges省略了其他详细信息）：

interface SelectItem {
    label: string;
    value: any;
}

export class FilterComponent implements OnInit {
    filter = new FormControl();

    @Input
    selected: SelectItem[] = [];

    @Input()
    values: SelectItem[] = [];

    constructor() { }

    ngOnInit() {
        this.filter.setValue(this.selected);
    }

    compareFn(v1: SelectItem, v2: SelectItem): boolean {
        return compareFn(v1, v2);
    }
}

function compareFn(v1: SelectItem, v2: SelectItem): boolean {
    return v1 && v2 ? v1.value === v2.value : v1 === v2;
}

注意this.filter.setValue（this.selected）在ngOnInit上面。

它似乎可以在Angular 6中使用。

Answer 7

您可以简单地实现自己的比较功能

[compareWith]="compareItems"

另请参阅文档。因此完整的代码如下所示：

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

并在Typescript文件中：

  compareItems(i1, i2) {
    return i1 && i2 && i1.id===i2.id;
  }