当使用 @angular/material 2.0.0-beta.1 和 angular 2 通过 formControlName 绑定时，md-select 不会显示当前选择的值

Question

在使用响应式表单和表单构建器时，我无法选择显示当前选择的值。

我已经创建了基本上归结为主/细节组件的东西。我能够在左侧绑定和列出一组项目，并在右侧有一个使用表单组绑定到“当前记录”的表单。

我已将其简化为一个简单的示例，其中仅包含一个 md-select 和一个按钮来模拟从列表中选择新记录。

这是表格：

<form [formGroup]="frm">
    <md-select placeholder="Food i would like to eat" formControlName="frmControl">
        <md-option *ngFor="let food of foods" [value]="food.value"> {{ food.viewValue }} </md-option>
    </md-select>
    <button md-button (click)="setValue()">SET VALUE</button>
</form>

这是组件：

import {Component} from '@angular/core';
import {FormBuilder, FormControl, FormGroup} from '@angular/forms';

@Component({
    moduleId: module.id,
    selector: 'select-demo',
    templateUrl: 'select-demo.html',
    styleUrls: ['select-demo.css'],
})
export class SelectDemo {

  frm: FormGroup;

  foods = [
    {value: 'steak-0', viewValue: 'Steak'},
    {value: 'pizza-1', viewValue: 'Pizza'},
    {value: 'tacos-2', viewValue: 'Tacos'}
  ];

  constructor(private _fb: FormBuilder){
    this.frm = this._fb.group({
      frmControl: []
    });
  }

  setValue() {
    this.frm.patchValue({ frmControl: 'steak-0 '});
  }
}

如果我使用 {{ frm.value | 将表单组输出到屏幕上json }} 我可以看到它实际上正在更新，因为值变为'steak-0'但是选择没有改变。

我希望列表中值为“steak-0”的项目会被选中并显示在 UI 中，就像我单击控件并从列表中手动选择一样。

实际上，如果我手动从列表中选择一个值然后单击按钮，它实际上会清除当前选择的值，并且浮动标签会像没有选择的值一样回落。

这种情况确实（有点）适用于 md-input-container，因为所选值正确显示在控件中，但是标签不会像预期的那样浮动......但这会有所不同所以问题。 ;)

我做错了什么？

提前致谢。

Answer 1

这是我的疏忽，md-select 选项被填充了一个对象，该对象将 ids 转换为字符串，并且记录使用数字作为数字......当你只得到几个时会发生这种情况前一天晚上睡了几个小时。希望这可以帮助其他人在像我一样浪费太多时间之前抓住同样的错误......

Answer 2

使用 ng-model 怎么样？

[form]
<md-select ng-model="selectedFood" ng-model-options="{trackBy: 'food.value'}">
    <md-option ng-value="food.value" ng-repeat="food in foods track by food.value">
        {{food.viewValue}}
    </md-option>
</md-select>

[component]
selectedFood = 'pizza-1';

selectedFood will change by your select value