md-select не отображает текущее выбранное значение при привязке через formControlName с использованием @ angular/material 2.0.0-beta.1 и углового 2

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» будет выбран и отображен в пользовательском интерфейсе, как если бы я щелкнул элемент управления и выбрал его вручную из списка.

Фактически, если я вручную выберем значение из списка и затем нажмите кнопку, оно фактически очистит текущее выбранное значение, и плавающая метка упадет вниз, как если бы не было выбранного значения.

Этот сценарий выполняет (вид) работу для md-input-container, поскольку выбранное значение отображается в элементе управления правильно, однако метка не плавает, как предполагается, но это будет другой вопрос. ;)

Что я делаю неправильно?

Заранее спасибо.

Answer 1

Это был надзор с моей стороны, параметры md-select заполнялись объектом, который преобразовывал идентификаторы в строку, а записи использовали числа в виде числа ... вот что происходит, когда вы получаете только несколько часов сна за ночь до этого. Надеюсь, это поможет кому-то еще поймать ту же ошибку, прежде чем тратить слишком много времени, как я сделал ...

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