将值加载到 mat-select 组件

【问题标题】：Load value to mat-select component将值加载到 mat-select 组件
【发布时间】：2018-03-27 16:13:36
【问题描述】：

我在 mat-select 组件（角材料）中遇到 2 路绑定问题。在我的 ts 文件中，我有一个选项列表和绑定变量（valueFromDB）。然后我在 mat-select 组件中选择值，它将值复制到 valueFromDB 变量。另一方面，在屏幕加载时，我想在我的 mat-select 组件 valueFromDB 变量中看到。我该怎么做？

https://stackblitz.com/edit/angular-grupfc?file=app%2Fselect-value-binding-example.html

export class SelectValueBindingExample {
  valueFromDB = new Option('Option2');
  options = [new Option('Option1'), new Option('Option2'), new Option('Option3')];
}

export class Option{
  name:string;
  constructor(n:string){
    this.name = n;
  }
}

<mat-form-field>
    <mat-select [(ngModel)]="valueFromDB" >
        <mat-option>None</mat-option>
        <mat-option *ngFor='let option of options' [value]='option' >{{option.name}}</mat-option>

    </mat-select>
</mat-form-field>

【问题讨论】：

标签： angular angular-material

【解决方案1】：

您的valueFromDB 没有引用数组中的对象，因此 Angular 无法绑定它们。我看到两个选项，通过在数组中查找匹配值来创建引用，例如：

ngOnInit() {
  this.valueFromDB = this.options.find(x => x.name === this.valueFromDB.name)
}

或者然后使用compareWith:

compareFn(op1: Option, op2: Option) {
  return op1.name === op2.name;
}

在模板中：

<mat-select [(ngModel)]="valueFromDB" [compareWith]="compareFn">

您的 StackBlitz 与 compareWith:https://stackblitz.com/edit/angular-grupfc-yjl58l?file=app%2Fselect-value-binding-example.html（创建对象引用也已添加但已注释掉）

【讨论】：