角度2材質設計からmd-selectコンポーネントのデフォルト値を設定するにはどうすればよいですか？

Question

残りのAPIからのデータから次のselectコンポーネントを取得します。どうすればmd-selectでデフォルトの選択値を設定できますか？

<md-select 
       placeholder= "Warehouse" 
       style="width: 100%" 
       [(ngModel)]='selectedProductWarehouse.warehouse' 
       name="Warehouse" 
       required 
       #Warehouse="ngModel"> 
      <md-option *ngFor="let warehouse of warehouses" [value]="warehouse">{{warehouse.description}}</md-option> 
     </md-select> 

Answer 1

あなたは、以下の

コンポーネントHTML

<md-select placeholder="Favorite food" [(ngModel)]="selectedValue" name="food"> 
    <md-option *ngFor="let food of foods" [value]="food.value" > 
     {{food.viewValue}} 
    </md-option> 
    </md-select> 

    <p> Selected value: {{selectedValue}} </p> 

を試みるかもしれコンポーネントスクリプト

@Component({ 
    selector: 'select-form-example', 
    templateUrl: './select-form-example.html', 
}) 
export class SelectFormExample { 
    foods = [ 
    {value: 'steak-0', viewValue: 'Steak'}, 
    {value: 'pizza-1', viewValue: 'Pizza'}, 
    {value: 'tacos-2', viewValue: 'Tacos'} 
    ]; 


    // setting this is the key to initial select. 
    selectedValue: string = this.foods[0].value; 
} 

ここで重要なのは、初期値でselectedValueを設定しています。

これをチェックするPlunker

これが役立ちますように！

Answer 2

デフォルト値をmd-selectに設定するには、[（ngModel）]で使用している変数にデフォルト値を設定する必要があります。あなたの場合：

コンポーネントのHTML =>

<md-select 
      placeholder= "Warehouse" style="width: 100%" 
      [(ngModel)]='selectedProductWarehouse.warehouse' 
      name="Warehouse" 
      required 
      #Warehouse="ngModel"> 
    <md-option *ngFor="let warehouse of warehouses" [value]="warehouse"> 
      {{warehouse.description}} 
</md-option> 
</md-select> 

コンポーネントスクリプト=>

@Component({ 
    selector: 'select-form-example', 
    templateUrl: './select-form-example.html', 
}) 

constructor() { 
    this.selectedProductWarehouse.warehouse = "default value" 
} 

Answer 3

あなたはMD-オプション値、デフォルト値のオブジェクト参照とcorrepondingでのオブジェクトの使用オプションリストのオプションは等しくありません。

これを修正するには、FormGroupを設定する前に、オプションリストの対応するオプションを使用してデフォルト値を上書きする必要があります。

Check this example