2
votes

Sélectionnez le premier élément de menu par défaut

Je souhaite implémenter un menu de sélection qui utilise les données d'énumération pour afficher les données et enregistre le nombre en fonction de la chaîne sélectionnée:

J'ai essayé ceci:

ENUM:

<select class="custom-select" name="state_raw" [(ngModel)]="merchant.state_raw" id="state_raw" required>
      <!--<option selected></option>-->
      <option [value]="stateType" *ngFor="let stateType of stateTypes">{{ MerchantStateType2LabelMapping[stateType] }}</option>

typescript angular angular6

0 commentaires

3 Réponses :

2
votes

Soit vous pouvez ajouter ce qui suit dans ngOnInit ()

<select class="custom-select" name="state_raw" [(ngModel)]="merchant.state_raw" id="state_raw" required>
      <!--<option selected></option>-->
      <option [value]="stateType" *ngFor="let stateType of stateTypes; first as isFirst" [selected]="isFirst">{{ MerchantStateType2LabelMapping[stateType] }}</option>
</select>

(ou) Vous pouvez utiliser la variable locale «first» de * ngFor

this.merchant.state_raw = this.stateTypes[0]

0 commentaires

0
votes

Définissez la valeur initiale où vous voulez ngOnInit (), Constructor ():

 public stateTypes = Object.values(MerchantStateType).filter(type =>
    isNumber(<any>type)
  );

le state_raw contient l'index de l'énumération. Votre sélection ressemble à ceci:

public stateTypes = Object.values(MerchantStateType);

Modifiez votre composant de:

<select class="custom-select" name="state_raw" [(ngModel)]="marchant.state_raw" id="state_raw" required>
  <option [value]="stateType" *ngFor="let stateType of stateTypes">{{ MerchantStateType2LabelMapping[stateType] }}
    </option>
    </select>

À:

this.merchant.state_raw = 1;

Cela supprimera vos identifiants de vos valeurs et n'obtiendra que la chaîne

0 commentaires

0
votes

Votre HTML

public current = 1;

Ts:

 <select class="custom-select" name="state_raw" [(ngModel)]="current" id="state_raw" required>
          <!--<option selected></option>-->
          <option [value]="stateType" *ngFor="let stateType of stateTypes">{{ MerchantStateType2LabelMapping[stateType] }}</option>

Maintenant la valeur du champ de sélection, vous l'obtiendrez avec la variable this.current .

0 commentaires