web-dev-qa-db-fra.com

Comment définir la valeur par défaut du composant md-select à partir de angular 2 conception de matériau?

J'ai le composant de sélection suivant qui est rempli à partir de données provenant d'une api de repos. Comment puis-je définir la valeur sélectionnée par défaut sur 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

vous pouvez essayer ci-dessous,

Composant 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>

Script de composant

@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;
}

La clé ici est de définir selectedValue avec la valeur initiale.

Vérifiez cela StackBlitz .

J'espère que cela t'aides!!

20
Madhu Ranjan

Pour définir la valeur par défaut sur md-select, vous devez définir la valeur par défaut sur la variable que vous utilisez dans [(ngModel)]. Dans ton cas:

Composant 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>

Script de composant =>

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

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

Lorsque vous utilisez des objets dans la valeur de l'option md, la référence d'objet de la valeur par défaut et l'option correspondante dans la liste d'options ne sont pas égales.

Pour résoudre ce problème, vous devez remplacer la valeur par défaut à l'aide de l'option correspondante dans la liste d'options avant de définir le FormGroup.

Vérifiez cet exemple

1
abahet