web-dev-qa-db-fra.com

Angular 8 drop down option sélectionnée ne s'affiche pas, comment se fait-il?

Cette question a été fréquemment posée. Ma situation est apparemment différente de toutes les autres car je ne trouve pas de solution à cela à partir des réponses existantes.

J'ai ce code:

<form (ngSubmit)="getExceptions(f)" #f="ngForm">
          <div class="row">
            <div class="form-group col-xs-3 col-sm-3">
              <label class="col-form-label" for="aantal">Aantal meldingen per pagina?</label>
              <select name="selectedQuantity" id="aantal" class="form-control" ngModel>
                <option *ngFor="let option of options" [value]="option">{{option}}</option>

              </select>
            </div>
.
.
.
</form>

options est définie comme:

private options: string[] = ['10', '20', '50'];

Je voudrais afficher "10" comme valeur sélectionnée par défaut, mais quoi que je fasse, le menu déroulant affiche toujours un blanc pour la valeur sélectionnée. Cliquer sur le menu déroulant affiche les valeurs 10, 20 et 30. Il est donc correctement rempli.

Qu'est-ce que j'ai essayé:

<option *ngFor="let option of options" [value]="option" [selected]="option==10">{{option}}
</option>

et

<option [value]="10" [selected]="true == true">10</option>
<option [value]="20">20</option>
<option [value]="50">50</option>

et

<option [value]="10" selected>10</option>
<option [value]="20">20</option>
<option [value]="50">50</option>

Cela a quelque chose à voir avec la liaison, car si je supprime le 'ngModel' de la balise select, il affiche la valeur que je veux utiliser comme valeur par défaut (10). Sorte de. Je ne peux plus lire la valeur sélectionnée mais la valeur par défaut s'affiche.

Je n'ai jamais rien fait avec plunkr, mais j'essaierai d'obtenir un exemple de travail là-bas, puis de coller un lien vers celui-ci ici.

angulartypescriptdrop-down-menuhtml-select
2
Werner van Mook

Essayez de définir ngModel comme ceci:

.ts

  private options: string[] = ["10", "20", "50"];
  selectedQuantity = "10";

.html

<select name="selectedQuantity" id="aantal" class="form-control" [(ngModel)]="selectedQuantity">
    <option *ngFor="let option of options" [value]="option" >{{option}}</option>
</select>

Démo de travail

3
Adrita Sharma

il suffit d'attribuer une valeur à une sélection

 <select [value]="10" ngModel>
 ...
2
Andrei

utiliser comme ci-dessous

<option [value]="10" [selected] ="true">10</option>

vous devez utiliser select comme liaison de propriété.

faites-moi savoir si cela aide

1
siddharth shah

Vous pouvez utiliser ngModel pour sélectionner avec la valeur par défaut dans une variable qui lui est affectée comme -


    <select name="selectedQuantity" id="aantal" 
      class="form-control" [(ngModel)]="selectedOption">
      <option *ngFor="let option of options" [value]="option">
           {{option}}
           </option>
     </select>

et la valeur sera comme - selectedOption: string = '10';

1
Milind

essayez comme ça [ngModel]="10"

<select name="selectedQuantity" id="aantal" class="form-control" [ngModel]="10">
   <option *ngFor="let option of options" [value]="option">{{option}}</option> 
</select>

démo ????

0
albarmavi