web-dev-qa-db-ja.com

angular 2マテリアルデザインからmd-selectコンポーネントのデフォルト値を設定するにはどうすればよいですか？

残りのAPIからのデータから生成される次の選択コンポーネントがあります。 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>
angularmaterial-designangular-material2
20
abdul.badru

以下を試してみてください、

コンポーネント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に初期値を設定することです。

これを確認してください StackBlitz 。

お役に立てれば！！

20
Madhu Ranjan

デフォルト値を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"
}
1
Vidur Singla

Md-option値でオブジェクトを使用する場合、デフォルト値のオブジェクト参照とオプションリストの対応するオプションは等しくありません。

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

この例を確認してください

1
abahet